Hi everyone,
I am trying to validate form email input and build it with autocomplete in ReactJS. I am catching the @ sign at onChange like so:
// Just one clarification, it's react and TypeScript not javascript but,
// they don't have different behaviours in my case I think only the way I specify props,
// state and types here are different. you can think of it as if you are dealing with JavaScript for those who are not familiar with typescript
import * as React from 'react';
class MyComponent extends React.Component<{}, IState> {
constructor(props: {}) {
super(props);
this.state = {
email: '',
initialExts: ['gmail.com', 'yahoo.com'] // and so on
}
}
handleSubmit(e: any) {
e.preventDefault();
this.setState({
email: this.state.email
})
}
handleChange(e: any) {
// e.target.value.slice(-1) 👈 this will give me the final character I am typing
if (e.target.value.slice(-1) === '@') {
// I think here I need to do the functionality to pop up the initialExs
}
this.setState({ email: e.target.value })
}
render() {
return (
<div>
<form onSubmit={ (e) => this.handleSubmit(e) }>
<input
type='text'
placeholder='someone@example.com'
value={ this.state.email }
onChange={ (e) => this.handleChange(e) }
/>
<button type='submit'>Check Email</button>
</form>
</div>
)
}
}
interface IState {
email: string;
initialExs: Array<string>;
}
What I am exactly asking for is something like the following attachment in the first replay to @vipatron 's comment
Please let me know if my question is not clear. Thanks in advance
