用于设置任何表单域状态的通用事件处理程序

Question

在这里，我们必须编写三个函数来更改表单所有输入字段的状态，如果我们有更多字段(例如电话和地址)，我们必须再编写两个函数来更改这些字段的状态，我想问有什么方法可以只编写一个泛型函数来更改此形式的任何字段的状态，而不是为每个表单字段？

class SignUpForm extends React.Component {
constructor() {
super();
this.state = {
name: '',
email: '',
password: '',
};
}
handleNameChange = (evt) => {
this.setState({name: evt.target.value});
}
handleEmailChange = (evt) => {
this.setState({email: evt.target.value});
}
handlePasswordChange = (evt) => {
this.setState({password: evt.target.value});
}
render(){
return(
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Enter Name"
value={this.state.name}
onChange={this.handleNameChange}
/>
<input
type="text"
placeholder="Enter email"
value={this.state.email}
onChange={this.handleEmailChange}
/>
<input
type="password"
placeholder="Enter password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
<button disabled={isDisabled}>Sign up</button>
</form>
)
}
}

Answer 1

您可以使用以下模式：

handleChange = (type, event) => {
this.setState({[type]: event.target.value});
}

你像这样使用句柄更改：

<input
type="text"
placeholder="Enter Name"
value={this.state.name}
onChange={(event) => this.handleChange('name', event)}
/>

Answer 2

有一种更简洁的方法可以使用 currying 来编写它：

handleChange = type => event => this.setState({[type]: event.target.value})

<input
type="text"
placeholder="Enter Name"
value={this.state.name}
id="name"
onChange={this.handleChange('name')}
/>

您甚至可以使用该元素的 ID 属性来避免每次渲染时实例化新处理程序(因为this.handleChange('name')每次渲染都会返回event => this.setState({name: event.target.value})的新实例)，并避免重复自己。但是，这可能不可取，因为这意味着您的元素 ID 必须与您的状态键匹配。

handleChange = event => this.setState({[event.target.id]: event.target.value})

<input
type="text"
placeholder="Enter Name"
value={this.state.name}
id="name"
onChange={this.handleChange}
/>