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

时间:2016-11-22 17:46:53

标签: javascript reactjs

我是React的新手,我找不到一种简单的方法来创建单个处理函数来设置表单中两个输入的状态。这就是我到目前为止所做的:

{
  "query": {
    "bool": {
      "must_not": [
        {
          "nested": {
            "path": "nestedArray",
            "query": {
              "bool": {
                "filter": {
                  "exists": {
                    "field": "nestedArray"
                  }
                }
              }
            }
          }
        }
      ]
    }
  }
}

JS

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

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

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

使用https://github.com/gcanti/tcomb-form react node-module。它有很好的功能,你可以自定义。

或者如果您不想使用任何节点模块

setValue: function(key) {
 const self = this;
 return function(e) {
   var o = Object.defineProperty(self.state, key, {value: e.target.value});
   self.setState(o);
 }
},