javascript - 在 React 中使用单个处理程序函数设置表单中的输入状态

Question

我是 React 的新手，我找不到一种简单的方法来创建单个处理程序函数来设置表单中两个输入的状态。这是我目前所拥有的:

<form onSubmit="onSave">
  <input type="text" value={this.state.name} onChange={this.setValue('name')}>
  <input type="text" value={this.state.bio onChange={this.setValue('bio')}>
</form>

JS

React.createClass({
  getInitialState() {
    return {
      name: '',
      bio: '',
    }
  },
  setValue: function(key) {
    const self = this;
    return function(e) {
      var o = {};
      o[key] = e.target.value;
      self.setState(o);
    }
  },
  onSave() {
    console.log(this.state);
  }
});

我遇到的问题是只有一个输入被更新。我也知道那里的表单组件，但我真的很想知道这样的事情是否可行，因为我的用例非常简单。

Answer 1

如果我理解这个问题，您可以为您的输入命名，然后执行 setState({[e.target.name]: e.target.value})。