在 React 应用程序中处理简单联系表单的 onChange 时,如何与 DRY 编码保持一致?
我想传递一个带有应更新状态的参数
例如,仅仅有 4 个输入 [姓名、电话、电子邮件、文本] 需要 4 个不同的事件处理程序来更新组件的不同状态,这并不是很好。
constructor(props) {
super(props);
this.state = {
type: '',
message: '',
name: '',
email: '',
phone: '',
content: ''
};
}
handleChange(e, state) {
this.setState({state: e.target.value});
alert(state + " with val " + e.target.value)
}
这不起作用并抛出无法读取未定义的属性“值”错误
<input value={this.state.name} onChange={this.handleChange(name).bind(this)} id="firstName" name="firstName" autocomplete="off" type="text" required />
最佳答案
您需要像这样将参数传递给handleChange
onChange={ this.handleChange.bind(this, name) }
handleChange
的签名将为 handleChange(state, e) {}
或者您可以使用arrow function
onChange={ (e) => this.handleChange(e, name) }
更新
根据您的问题描述,我想您不需要传递额外的参数,您可以输入name
(在这种情况下我认为输入名称和状态名称可以相同),并且可以这样做
class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
// type: '',
// message: '',
name: '',
email: '',
// phone: '',
// content: ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({ [e.target.name]: e.target.value })
}
render() {
return <div>
<input
value={this.state.name}
onChange={ this.handleChange }
name="name"
autocomplete="off"
type="text"
required
/>
<input
value={this.state.email}
onChange={ this.handleChange }
name="email"
autocomplete="off"
type="text"
required
/>
<p>{this.state.name},{this.state.email}</p>
</div>
}
};
ReactDOM.render(<Form />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
关于reactjs - React 使用一个事件处理程序来处理不同的输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40997820/