使用單處理函數來設置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})。

Answer 2

使用https://github.com/gcanti/tcomb-form反應節點模塊。它具有很好的功能，您可以自定義。

或者，如果你不希望使用任何節點模塊

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