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

好奇什么正确的方法来处理这个问题是：

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

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

Answer 1

我build议坚持标准的HTML属性，如input元素name来标识你的input。 另外，您不需要将“total”作为单独的值保存在状态中，因为它可以通过在状态中添加其他值来组合：

 var Hello = React.createClass({ getInitialState: function() { return {input1: 0, input2: 0}; }, render: function() { const total = this.state.input1 + this.state.input2; return ( <div>{total}<br/> <input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} /> <input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} /> </div> ); }, handleChange: function(e) { this.setState({[e.target.name]: e.target.value}); } }); React.renderComponent(<Hello />, document.getElementById('content')); 

Answer 2

您可以使用.bind方法预先构buildhandleChange方法的参数。 这将是这样的：

  var Hello = React.createClass({ getInitialState: function() { return {input1:0, input2:0}; }, render: function() { var total = this.state.input1 + this.state.input2; return ( <div>{total}<br/> <input type="text" value={this.state.input1} onChange={this.handleChange.bind(this, 'input1')} /> <input type="text" value={this.state.input2} onChange={this.handleChange.bind(this, 'input2')} /> </div> ); }, handleChange: function (name, e) { var change = {}; change[name] = e.target.value; this.setState(change); } }); React.renderComponent(<Hello />, document.getElementById('content')); 

（我也做了total计算，因为这是推荐的事情。）

Answer 3

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

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

Answer 4

已弃用的解决scheme

valueLink/checkedLink从核心React中弃用 ，因为它会让一些用户感到困惑。 如果您使用最新版本的React，此答案将不起作用。 但是，如果你喜欢它，你可以通过创build你自己的Input组件来轻松地模拟它

旧的答案内容：

使用React的双向数据绑定助手可以更容易地实现您想要实现的目标。

 var Hello = React.createClass({ mixins: [React.addons.LinkedStateMixin], getInitialState: function() { return {input1: 0, input2: 0}; }, render: function() { var total = this.state.input1 + this.state.input2; return ( <div>{total}<br/> <input type="text" valueLink={this.linkState('input1')} />; <input type="text" valueLink={this.linkState('input2')} />; </div> ); } }); React.renderComponent(<Hello />, document.getElementById('content')); 

容易吗？

http://facebook.github.io/react/docs/two-way-binding-helpers.html

你甚至可以实现你自己的mixin

Answer 5

您可以使用称为ref的特殊React属性，然后使用React的getDOMNode()函数匹配onChange事件中的真实DOM节点：

 handleClick: function(event) { if (event.target === this.refs.prev.getDOMNode()) { ... } } render: function() { ... <button ref="prev" onClick={this.handleClick}>Previous question</button> <button ref="next" onClick={this.handleClick}>Next question</button> ... } 

Answer 6

你也可以这样做：

 ... handleChange(input, value) { this.setState({ input: value }) } render() { return ( <div> <input type="text" onChange={e => this.handleChange('input1', e.target.value)} /> <input type="text" onChange={e => this.handleChange('input2', e.target.value)} /> </div> ) } 

Answer 7

@维格里尔Disgr4ce

当涉及到多领域forms时，使用React的关键特性是有意义的：组件。

在我的项目中，我创build了TextField组件，它至less占用了一定的价值，它负责处理input文本字段的常见行为。 这样，在更新值状态时，不必担心跟踪字段名称。

 [...] 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} />; } [...] 

Answer 8

您可以通过创buildpipe理单个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} />) } }) 

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

Answer 9

您好改善ssorallen答案。 您不需要绑定函数，因为您可以在没有它的情况下访问input。

 var Hello = React.createClass({ render: function() { var total = this.state.input1 + this.state.input2; return ( <div>{total}<br/> <input type="text" value={this.state.input1} id="input1" onChange={this.handleChange} /> <input type="text" value={this.state.input2} id="input2" onChange={this.handleChange} /> </div> ); }, handleChange: function (name, value) { var change = {}; change[name] = value; this.setState(change); } }); React.renderComponent(<Hello />, document.getElementById('content'));