Question

我遇到的一个例子：

我最近遇到了以下示例：

tmp/cache/persistent

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

我对此有疑问：

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

Answer 1

我不是React的专家，但我可以说几件事：

您可以对每种类型的输入进行更改，它可以使用选择，文本和复选框。
最好直接在输入上使用onChange或任何侦听器，为什么？因为在此功能中，您可以使用“事件”参数轻松引用您的输入，如下所示：

function handleChange（event）{ var value = event.target.value; }

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

Answer 2

我知道的最短，效果很好：

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

请记住：

你需要添加名称=＆＃34; name＆＃34; attr到输入标签，
您还需要在州内拥有相应的姓名。

检查此代码段并使用它添加更多文字字段（它的神奇之处）：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

来源： https://reactjs.org/docs/forms.html（此处您将找到适用于不同类型输入的版本） https://medium.com/@tmkelly28/handling-multiple-form-inputs-in-react-c5eb83755d15（也是很好的资源）

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

2 个答案: