Javascript 对每个HTML输入进行ReactJS handleChange

我在官方网站上关注ReactJS教程，我对设计选择很好奇。基本上，教程说我们需要在每个输入的onChange上都有一个handleChange函数

handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
},

<input
    type="text"
    placeholder="Your name"
    value={this.state.author}
    onChange={this.handleAuthorChange}
/>

handleAuthorChange:函数（e）{
this.setState（{author:e.target.value}）；
},

这是否意味着如果我有一个表单，有10个文本输入和3个复选框输入，它们中的每一个都需要一个“handleChange”函数

---

处理这种情况的最佳实践是什么？

不太可能，您可以从代码中删除

value={this.state.author}

和

onChange={this.handleAuthorChange}

，它仍然可以工作。如果您想在提交表单时引用输入，我会使用React中的

ref

功能。这是一种创建输入引用以供以后使用的方法

handleAuthorChange: function(e) {
    this.setState({author: e.target.value});
},

<input
    type="text"
    placeholder="Your name"
    ref={(c) => this.yourNameField = c}
/>

handleAuthorChange:函数（e）{
this.setState（{author:e.target.value}）；
},
this.yourNameField=c}
/>

建议使用

受控组件

，它使用

onChange（）

处理程序处理所有

输入

。但是，您不需要在不同的处理程序中为每个处理程序处理，您可以使用on处理程序处理所有

onChange（）

，但是，唯一地标识目标并将值设置为状态

请参见小提琴以了解示例

在本例中，我使用了一个通用的

onChange（）

处理程序，但是 用每个输入框的

id

唯一标识并填充 基于id的状态，id被用作 输入框

---

更多参考检查

是的，我认为使用“通用”函数处理所有onChange回调是一种更简单的方法，但您的函数是否也考虑了复选框/无线电输入？@StevenLee是的。任何id为的内容。但是，对于复选框，实现应该是不同的。@StevenLee更新了fiddle with复选框和单选按钮。请查收