react Один обработчик для ввода в разные поля формы
Primary tabs
Если вам не надо перехватывать ввод в поле, но нужно запоминать состояние, то используйте подход вроде:
class Login extends Component {
constructor () {
super();
this.state = {
email: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange (evt) {
// check it out: we get the evt.target.name (which will be either "email" or "password")
// and use it to target the key on our `state` object with the same name, using bracket syntax
this.setState({ [evt.target.name]: evt.target.value });
}
render () {
return (
<form>
<label>Email</label>
<input type="text" name="email" onChange={this.handleChange} />
<label>Password</label>
<input type="password" name="password" onChange={this.handleChange} />
</form>
);
}
}
Если же нужно чтобы значение поля бралось из состояния (как тут), то можно установить value для инпута, например:
<input type="password" name="password"
value={this.state.password} onChange={this.handleChange} />Идя общего handleChange взята отсюда: https://medium.com/better-programming/handling-multiple-form-inputs-in-react-c5eb83755d15
- Log in to post comments
- 1937 reads