Question

我正在关注官方网站上的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}
/>

这是否意味着如果我有一个包含10个文本输入和3个复选框输入的表单，每个表单都需要有一个＆＃34; handleChange＆＃34;功能？

处理这种情况的最佳做法是什么？

Answer 1

这是一种使用controlled components的推荐方法，它使用inputs处理程序处理所有onChange()。但是，您不需要为每个处理程序处理不同的处理程序，您可以使用处理程序处理所有onChange()但是，唯一地标识目标并将值设置为状态。

请参阅小提琴，了解示例https://jsfiddle.net/Pranesh456/ga2csaty/4/

在这个例子中，我使用了一个普通的onChange()处理程序但是我使用id唯一标识每个输入框并填充基于id的状态，该value被用作#datset id attributes value 1 a,b,c 1 2 c,d 0 3 b,e 1 输入框。

有关更多参考检查React's controlled components

Answer 2

不是，您可以从代码中删除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}
/>

ReactJS handleChange对每个HTML输入

2 个答案: