设置任何窗体字段状态的泛型事件处理程序
设置任何窗体字段状态的泛型事件处理程序
提问于 2017-03-28 09:36:51
在这里，我们必须编写三个函数来改变所有表单输入字段的状态，如果我们有更多的字段(例如电话和地址)，我们必须再编写两个函数来更改这些字段的状态，我想问一下，我们是否可以只编写一个泛型函数来改变这个表单的任何字段的状态，而不是为每个表单字段编写单独的函数呢？
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>
)
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-28 09:40:12
您可以使用以下模式：
handleChange = (type, event) => {
this.setState({[type]: event.target.value});
}您这样使用handleChange：
<input
type="text"
placeholder="Enter Name"
value={this.state.name}
onChange={(event) => this.handleChange('name', event)}
/>Stack Overflow用户
发布于 2019-01-18 23:08:09
有一种更简洁的方法可以用跑步来写这个：
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}
/>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43065940
复制相关文章
相似问题
腾讯云开发者
