将单个 onChange 应用于所有输入框

Question

我遇到的一个例子：

我最近遇到了以下例子：

activate(event) {
  console.log(event.target.value);
}

render() {
  return ( 
    <div onChange={this.activate.bind(this)}>
      <input type="radio" value="yes" name="confirm"/> Yes
      <input type="radio" value="no" name="confirm"/> No
    </div>
   )
}

这允许将 onChange 处理程序应用于单选按钮的父 div，而不是应用于每个单独的单选按钮。

我对此的疑问：

1. 是否有任何原因将 onChange 属性专门应用于一组单选按钮而不应用于其他表单元素组？
2. 为什么不将所有表单字段放在单个 div 或表单元素中并且只有一个 onChange 属性？
3. 这是ReactJS特有的，还是可以在基本的JavaScript中完成类似的事情？

Answer 1

1。是否有任何原因导致

onChange

属性专门应用于一组单选按钮而不应用于其他表单元素组？

不，没有理由不能将其应用于其他表单元素甚至 DOM 的根元素。所有事件都从根到目标（捕获阶段），然后回到根（冒泡阶段）。编写事件处理程序时必须牢记这一点。有关事件冒泡的更多信息，请参阅 this SO thread。

2。为什么不将所有表单字段放在单个 div 或表单元素中并且只有一个 onChange 属性？

对于普通 JS 来说，这通常是正确的。然而，React 实现了自己的事件系统，他们建议的方式似乎是创建一个事件监听器，然后将每个输入链接到它。

<form onSubmit={handleSubmit}>
    <input type="text" onChange={handleChange} />
    <input type="text" onChange={handleChange} />
    <input type="text" onChange={handleChange} />
</form>

无论是否使用事件冒泡，

handleChange

函数都会使用

event.target.value

，但React似乎更喜欢将函数显式附加到每个输入元素。

如果不这样做，当您尝试设置默认值时，通常会遇到警告：

（默认值也是常见的混乱来源，更多信息

此处）

这

只是一个警告。此警告已成为 Github 存储库上大规模讨论的主题，更多讨论如下。

3.这是 ReactJS 特有的，还是可以在基本 JavaScript 中完成类似的操作？

如前所述，这不是特定于 React 的，它实际上更特定于 JS。 React 似乎对此不可知。他们似乎更喜欢您向每个输入元素添加

onChange

引用，而不是以这种方式使用冒泡。

什么是正确的方法？

我不知道。我认为这取决于您更喜欢什么，或者情况需要什么。

在

Github 存储库上的大型讨论

中，大多数人都会遇到警告，因为使用事件冒泡通常是在 vanilla JS 中鼓励作为“最佳实践”的方式。不过，也有声音说：

这是我的观点，但我想说这是相反的，这是一个坏主意。它依赖于 React 层次结构之外的冒泡。

评论链接

因此，取决于你问的是谁，使用事件冒泡可能会被认为违背了 React 思维的趋势。这将取决于您选择如何构建应用程序。

重要的是要注意，它没有

没有真正的问题，一切都有效。无论您是否使用事件冒泡。在这个问题中，主要的抱怨似乎可以归结为这样一个事实：控制台上充满了警告，并且没有优雅的方法来关闭它们。最好的方法似乎是只为输入元素分配一个空函数。

Answer 2

您可以在每种类型的输入上放置 onChange，它适用于选择、文本、复选框。
最好直接在输入本身上使用 onChange 或任何侦听器，为什么？因为在此函数中，您可以轻松地使用“事件”参数引用您的输入，如下所示：

2. 函数handleChange（事件）{ var value = event.target.value; }

如果你不这样做，你就必须参考正确的输入，这可能真的很混乱。

Answer 3

handleInputChange = ({ target: { name, value } }) => {
  this.setState({ [name]: value })
}

请记住：

您需要将 name="name" 属性添加到输入标签中，

• 您还需要有该州的通讯名称。
检查此片段并使用它添加更多文本字段（这很神奇）：

class SingleHandler extends React.Component {
  state = {
    title: '',
    description: ''
  }
  
  handleInputChange = ({target: { name, value }}) => {
    this.setState({ [name]: value });
  }

  render() {
    return (
      <div>
        <label htmlFor="title">title: {this.state.title}</label>

        <input
          type="text"
          name="title"
          value={this.state.title}
          onChange={this.handleInputChange}
        />
        <label htmlFor="description">description: {this.state.description}</label>

        <input
          type="text"
          name="description"
          value={this.state.description}
          onChange={this.handleInputChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<SingleHandler />, document.body);

input, label {
  display: block;
  width: 80%;
}

<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>

来源：

https://reactjs.org/docs/forms.html

（在这里您会找到一个也适用于不同类型输入的版本） https://medium.com/@tmkelly28/handling-multiple-form-inputs-in-react-c5eb83755d15（也很棒的资源）

Answer 4

Answer 5

renderInputText(title, name){
    return (
      <div className="form-group">
        <label>{title}</label>
        <input type="text" name={name} className="form-control" placeholder={"Enter " + title}
          value={this.state.detail[name]} onChange={this.onChangeHandler} onFocus={this.onChangeHandler}/>
      </div>
    );
  }

然后你可以从你的 html 表单中调用它：

<div class="form">
{this.renderInputText('Title', 'title')}
{this.renderInputText('Name', 'name')}
{this.renderInputText('Phone', 'phone')}
etc...
</div>