単一のハンドラ関数を使用してフォームの入力状態をReactで設定する

Question

React初めてのハンドラ関数を作成して2つの入力の状​​態をフォームに設定する簡単な方法が見つかりません。これは私がこれまで持っているものです：私が持っている

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

に使用したくない場合は、