blocks|key|4677977|text|我建议在input元素上使用标准的超文本标记语言属性，比如name来识别输入。此外，您不需要将"total“作为一个单独的值保存在state中，因为它可以通过在state中添加其他值来组合：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4677978|var+Hello+=+React.createClass({
++++getInitialState:+function()+{
++++++++return+{input1:+0,+input2:+0};
++++},
++++render:+function()+{
++++++++const+total+=+this.state.input1+%2B+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'));|code-block|syntax|javascript|4677979|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-name^0|4|5|T|4|T|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>I suggest sticking to standard HTML attributes like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-name" rel="noreferrer"><code>name</code></a> on <code>input</code> Elements to identify your inputs. Also, you don't need to keep "total" as a separate value in state because it is composable by adding other values in your state:</p>

<pre><code>var Hello = React.createClass({
    getInitialState: function() {
        return {input1: 0, input2: 0};
    },
    render: function() {
        const total = this.state.input1 + this.state.input2;

        return (
            &lt;div&gt;{total}&lt;br/&gt;
                &lt;input type="text" value={this.state.input1} name="input1" onChange={this.handleChange} /&gt;
                &lt;input type="text" value={this.state.input2} name="input2" onChange={this.handleChange} /&gt;
            &lt;/div&gt;
        );
    },
    handleChange: function(e) {
        this.setState({[e.target.name]: e.target.value});
    }
});

React.renderComponent(&lt;Hello /&gt;, document.getElementById('content'));
</code></pre>


blocks|key|172158|text|不推荐使用的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|172159|valueLink/checkedLink是来自核心React的deprecated，因为它让一些用户感到困惑。如果您使用最新版本的React，此答案将不起作用。但是，如果您喜欢它，您可以通过创建自己的Input组件轻松地模拟它|offset|length|style|CODE|172160|老答案内容：|172161|使用React的双向数据绑定助手可以更容易地实现您想要实现的目标。|172162|var+Hello+=+React.createClass({
++++mixins:+[React.addons.LinkedStateMixin],
++++getInitialState:+function()+{
++++++++return+{input1:+0,+input2:+0};
++++},

++++render:+function()+{
++++++++var+total+=+this.state.input1+%2B+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'));|code-block|syntax|javascript|172163|很简单，对吧？|172164|http://facebook.github.io/react/docs/two-way-binding-helpers.html|172165|你甚至可以使用implement+your+own+mixin|172166|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/facebook/react/issues/2302|1|2|https://stackoverflow.com/a/21352222/82609^0|0|0|L|2T|5|W|A|0|0|0|0|0|0|0|1T|1|0|7|O|2|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@$D|19|E|1A|F|G]|$D|1B|E|1C|F|G]]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1I|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|U|3|V|5|6|7|1O|8|@]|9|@$D|1P|E|1Q|1|1R]]|A|$]]|$1|W|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|T]]|15|$5|Z|10|11|A|$12|16]]]]

<h1>Deprecated solution</h1>

<p><code>valueLink/checkedLink</code> are <a href="https://github.com/facebook/react/issues/2302" rel="nofollow noreferrer">deprecated</a> from core React, because it is confusing some users. This answer won't work if you use a recent version of React. But if you like it, you can easily emulate it by creating your own <code>Input</code> component</p>

<h1>Old answer content:</h1>

<p>What you want to achieve can be much more easily achieved using the 2-way data binding helpers of React.</p>

<pre><code>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 (
            &lt;div&gt;{total}&lt;br/&gt;
                &lt;input type="text" valueLink={this.linkState('input1')} /&gt;;
                &lt;input type="text" valueLink={this.linkState('input2')} /&gt;;
            &lt;/div&gt;
        );
    }

});

React.renderComponent(&lt;Hello /&gt;, document.getElementById('content'));
</code></pre>

<p>Easy right?</p>

<p><a href="http://facebook.github.io/react/docs/two-way-binding-helpers.html" rel="nofollow noreferrer">http://facebook.github.io/react/docs/two-way-binding-helpers.html</a></p>

<p>You can even <a href="https://stackoverflow.com/a/21352222/82609">implement your own mixin</a></p>


blocks|key|172222|text|@Vigril+Disgr4ce|type|unstyled|depth|inlineStyleRanges|entityRanges|data|172223|当涉及到多字段表单时，使用React的关键特性:组件是有意义的。|172224|在我的项目中，我创建了TextField组件，这些组件至少需要一个值属性，并且它负责处理输入文本字段的常见行为。这样，您就不必担心在更新值状态时跟踪字段名。|172225|[...]

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}+/>;
}

[...]|code-block|syntax|javascript|172226|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>@Vigril Disgr4ce</p>

<p>When it comes to multi field forms, it makes sense to use React's key feature: components.</p>

<p>In my projects, I create TextField components, that take a value prop at minimum, and it takes care of handling common behaviors of an input text field. This way you don't have to worry about keeping track of field names when updating the value state.</p>

<pre><code>[...]

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

[...]
</code></pre>


blocks|key|4678111|text|您可以使用.bind方法预先构建handleChange方法的参数。它应该是这样的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4678112|++var+Hello+=+React.createClass({
++++getInitialState:+function()+{
++++++++return+{input1:0,+
++++++++++++++++input2:0};
++++},
++++render:+function()+{
++++++var+total+=+this.state.input1+%2B+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'));|code-block|syntax|javascript|4678113|(我还让total在渲染时计算，因为这是推荐的做法。)|4678114|entityMap^0|5|5|G|C|0|0|4|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>You can use the <code>.bind</code> method to pre-build the parameters to the <code>handleChange</code> method.
It would be something like:</p>

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

  React.renderComponent(&lt;Hello /&gt;, document.getElementById('content'));
</code></pre>

<p>(I also made <code>total</code> be computed at render time, as it is the recommended thing to do.)</p>


blocks|key|4678155|text|您可以使用一个名为ref的特殊React属性，然后使用React的getDOMNode()函数匹配onChange事件中的实际DOM节点：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4678156|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>
++...
}|code-block|syntax|javascript|4678157|entityMap^0|9|3|F|5|R|5|X|C|1D|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use a special <code>React</code> attribute called <code>ref</code> and then match the real DOM nodes in the <code>onChange</code> event using <code>React</code>'s <code>getDOMNode()</code> function:</p>

<pre><code>handleClick: function(event) {
  if (event.target === this.refs.prev.getDOMNode()) {
    ...
  }
}

render: function() {
  ...
  &lt;button ref="prev" onClick={this.handleClick}&gt;Previous question&lt;/button&gt;
  &lt;button ref="next" onClick={this.handleClick}&gt;Next question&lt;/button&gt;
  ...
}
</code></pre>


blocks|key|4678180|text|onChange事件气泡...所以你可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4678181|//+A+sample+form
render+()+{
++<form+onChange={setField}>
++++<input+name="input1"+/>
++++<input+name="input2"+/>
++</form>
}|code-block|syntax|javascript|4678182|您的setField方法可能如下所示(假设您使用的是ES2015或更高版本：|4678183|setField+(e)+{
++this.setState({[e.target.name]:+e.target.value})
}|4678184|我在几个应用程序中使用了类似的东西，非常方便。|4678185|entityMap^0|0|8|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>The <code>onChange</code> event bubbles... So you can do something like this:</p>

<pre><code>// A sample form
render () {
  &lt;form onChange={setField}&gt;
    &lt;input name="input1" /&gt;
    &lt;input name="input2" /&gt;
  &lt;/form&gt;
}
</code></pre>

<p>And your setField method might look like this (assuming you're using ES2015 or later:</p>

<pre><code>setField (e) {
  this.setState({[e.target.name]: e.target.value})
}
</code></pre>

<p>I use something similar to this in several apps, and it's pretty handy.</p>


blocks|key|4678233|text|您可以通过创建管理单个input的值的单独InputField组件来跟踪每个子input的值。例如，InputField可以是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4678234|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}+/>)
++}
})|code-block|syntax|javascript|4678235|现在，可以在此InputField组件的单独实例中跟踪每个input的值，而无需在父组件的状态中创建单独的值来监视每个子组件。|4678236|entityMap^0|B|5|L|A|13|5|1E|A|0|0|7|A|T|5|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$]]

<p>You can track the value of each child <code>input</code> by creating a separate <code>InputField</code> component that manages the value of a single <code>input</code>. For example the <code>InputField</code> could be:</p>

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

<p>Now the value of each <code>input</code> can be tracked within a separate instance of this <code>InputField</code> component without creating separate values in the parent's state to monitor each child component.</p>


blocks|key|4678241|text|你也可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4678242|...
constructor()+{
++++super();
++++this.state+=+{+input1:+0,+input2:+0+};
++++this.handleChange+=+this.handleChange.bind(this);
}

handleChange(input,+value)+{
++++this.setState({
++++++++[input]:+value
++++})
}

render()+{
++++const+total+=+this.state.input1+%2B+this.state.input2;
++++return+(
++++++++<div>
++++++++++++{total}<br+/>
++++++++++++<input+type="text"+onChange={e+=>+this.handleChange('input1',+e.target.value)}+/>
++++++++++++<input+type="text"+onChange={e+=>+this.handleChange('input2',+e.target.value)}+/>
++++++++</div>
++++)
}|code-block|syntax|javascript|4678243|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can also do it like this: </p>

<pre><code>...
constructor() {
    super();
    this.state = { input1: 0, input2: 0 };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(input, value) {
    this.setState({
        [input]: value
    })
}

render() {
    const total = this.state.input1 + this.state.input2;
    return (
        &lt;div&gt;
            {total}&lt;br /&gt;
            &lt;input type="text" onChange={e =&gt; this.handleChange('input1', e.target.value)} /&gt;
            &lt;input type="text" onChange={e =&gt; this.handleChange('input2', e.target.value)} /&gt;
        &lt;/div&gt;
    )
}
</code></pre>


blocks|key|4678318|text|我将为这个问题提供非常简单的解决方案。假设我们有两个输入username和password，但是我们希望我们的句柄简单和通用，这样我们就可以重用它，而不是编写样板代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4678319|I.Our表单：|4678320|++++++++++++++++<form>
++++++++++++++++++++<input+type="text"+name+=+"username"+onChange={this.onChange}+value={this.state.username}/>
++++++++++++++++++++<input+type="text"+name+=+"password"+onChange={this.onChange}+value={this.state.password}/>
++++++++++++++++++++<br></br>
++++++++++++++++++++<button+type="submit">Submit</button>
++++++++++++++++</form>|code-block|syntax|javascript|4678321|II.Our构造函数，我们想要保存我们的username和password，这样我们就可以很容易地访问它们：|4678322|constructor(props)+{
++++super(props);
++++this.state+=+{
++++++++username:+'',
++++++++password:+''
++++};

++++this.onSubmit+=+this.onSubmit.bind(this);
++++this.onChange+=+this.onChange.bind(this);
}|4678323|只有一个onChange事件的III.The有趣和“通用”句柄是基于以下内容的：|4678324|onChange(event)+{
++++let+inputName+=+event.target.name;
++++let+value+=+event.target.value;

++++this.setState({[inputName]:value});


++++event.preventDefault();
}|4678325|让我解释一下：|4678326|1.当检测到更改时，将调用onChange(event)|4678327|2.然后我们获得字段的name参数及其值：|4678328|let+inputName+=+event.target.name;++ex:+username|4678329|let+value+=+event.target.value;+ex:+itsgosho|4678330|3.基于name参数，我们从构造函数中的状态获取值，并用值更新它：|4678331|this.state['username']+=+'itsgosho'|4678332|4.这里需要注意的关键是字段的名称必须与状态中的参数相匹配|4678333|希望我以某种方式帮助了某人:)|4678334|entityMap^0|S|8|11|8|0|0|0|K|8|T|8|0|0|4|8|0|0|0|D|F|0|0|0|1C|0|0|18|0|0|0|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@$9|1F|A|1G|B|C]|$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1Q|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1R|8|@$9|1S|A|1T|B|C]]|D|@]|E|$]]|$1|S|3|T|5|J|7|1U|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|1V|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|1W|8|@$9|1X|A|1Y|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|20|8|@$9|21|A|22|B|C]]|D|@]|E|$]]|$1|12|3|13|5|6|7|23|8|@$9|24|A|25|B|C]]|D|@]|E|$]]|$1|14|3|15|5|6|7|26|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@]|E|$]]|$1|18|3|19|5|6|7|2A|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|6|7|2B|8|@]|D|@]|E|$]]|$1|1C|3|-4|5|6|7|2C|8|@]|D|@]|E|$]]]|1D|$]]

<p>I will provide really simple solution to the problem.
Suppose we have two inputs <code>username</code> and <code>password</code>,but we want our handle to be easy and generic ,so we can reuse it and don't write boilerplate code.</p>

<p>I.Our form:</p>

<pre><code>                &lt;form&gt;
                    &lt;input type="text" name = "username" onChange={this.onChange} value={this.state.username}/&gt;
                    &lt;input type="text" name = "password" onChange={this.onChange} value={this.state.password}/&gt;
                    &lt;br&gt;&lt;/br&gt;
                    &lt;button type="submit"&gt;Submit&lt;/button&gt;
                &lt;/form&gt;
</code></pre>

<p>II.Our constructor ,which we want to save our <code>username</code> and <code>password</code> ,so we can access them easily:</p>

<pre><code>constructor(props) {
    super(props);
    this.state = {
        username: '',
        password: ''
    };

    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
}
</code></pre>

<p>III.The interesting and "generic" handle with only one <code>onChange</code> event is based on this:</p>

<pre><code>onChange(event) {
    let inputName = event.target.name;
    let value = event.target.value;

    this.setState({[inputName]:value});


    event.preventDefault();
}
</code></pre>

<p>Let me explain:</p>

<p>1.When a change is detected the <code>onChange(event)</code> is called</p>

<p>2.Then we get the name parameter of the field and its value:</p>

<p><code>let inputName = event.target.name;  ex: username</code></p>

<p><code>let value = event.target.value; ex: itsgosho</code></p>

<p>3.Based on the name parameter we get our value from the state in the constructor and update it with the value:</p>

<p><code>this.state['username'] = 'itsgosho'</code></p>

<p>4.The key to note here is that the name of the field must match with our parameter in the state</p>

<p>Hope I helped someone somehow :)</p>


blocks|key|172499|text|您的州的键应该与您的输入字段的名称相同。然后，您可以在handleEvent方法中执行此操作；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|172500|this.setState({
++++++++[event.target.name]:+event.target.value
});|code-block|syntax|javascript|172501|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The key of your state should be the same as the name of your input field. Then you can do this in the handleEvent method;</p>

<pre><code>this.setState({
        [event.target.name]: event.target.value
});
</code></pre>


<p>Curious what the right way to approach this is:</p>

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

React.renderComponent(&lt;Hello /&gt;, document.getElementById('content'));
</code></pre>

<p>Obviously you could create separate handleChange functions to handle each different input, but that's not very nice.  Similarly you could create a component just for an individual input, but I wanted to see if there's a way to do it like this.</p>


React.js: Identifying different inputs with one onChange handler

好奇什么是解决这个问题的正确方法：var Hello = React.createClass({getInitialState: function() {    return {total: 0, input1:0, input2:0};},render: function() {    return (       ...

问React.js:使用一个onChange处理程序标识不同的输入
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React.js:使用一个onChange处理程序标识不同的输入EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React.js:使用一个onChange处理程序标识不同的输入
EN