React.js：使用一个onChange处理程序识别不同的输入

JavaScript

凯神无

2020-03-11

好奇解决此问题的正确方法是：

var Hello = React.createClass({
getInitialState: function() {
    return {total: 0, input1:0, input2:0};
},
render: function() {
    return (
        <div>{this.state.total}<br/>
            <input type="text" value={this.state.input1} onChange={this.handleChange} />
            <input type="text" value={this.state.input2} onChange={this.handleChange} />
        </div>
    );
},
handleChange: function(e){
    this.setState({ ??? : e.target.value});
    t = this.state.input1 + this.state.input2;
    this.setState({total: t});
}
});

React.renderComponent(<Hello />, document.getElementById('content'));

显然，您可以创建单独的handleChange函数来处理每个不同的输入，但这不是很好。同样，您可以只为单个输入创建一个组件，但是我想看看是否有办法做到这一点。

第739篇《React.js：使用一个onChange处理程序识别不同的输入》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
Green小宇宙伽罗 2020.03.11

您可以input通过创建一个单独的InputField组件来管理单个孩子的价值来跟踪每个孩子的价值input。例如，InputField可能是：

var InputField = React.createClass({
  getInitialState: function () {
    return({text: this.props.text})
  },
  onChangeHandler: function (event) {
     this.setState({text: event.target.value})
  }, 
  render: function () {
    return (<input onChange={this.onChangeHandler} value={this.state.text} />)
  }
})

现在，input可以在该InputField组件的单独实例内跟踪每个组件的值，而无需在父级状态下创建单独的值来监视每个子组件。

宝儿Davaid 2020.03.11

@Vigril Disgr4ce

对于多字段表单，使用React的关键功能（组件）是有意义的。

在我的项目中，我创建了TextField组件，该组件至少具有一个值道具，并且它负责处理输入文本字段的常见行为。这样，您在更新值状态时不必担心跟踪字段名称。

[...]

handleChange: function(event) {
  this.setState({value: event.target.value});
},
render: function() {
  var value = this.state.value;
  return <input type="text" value={value} onChange={this.handleChange} />;
}

[...]
小宇宙飞云 2020.03.11

该onChange事件冒泡......所以，你可以这样做：

// A sample form
render () {
  <form onChange={setField}>
    <input name="input1" />
    <input name="input2" />
  </form>
}

而且您的setField方法可能看起来像这样（假设您使用的是ES2015或更高版本：

setField (e) {
  this.setState({[e.target.name]: e.target.value})
}

我在几个应用程序中都使用了类似的东西，这非常方便。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android