React.jsにてstateの一部だけ更新する方法

Question

###現状
React.jsの初心者です。
React.jsにてインプットテキストを2行使って、入力値が変わる度にstateを使って管理しています。

var HeaderFields = React.createClass({
        getInitialState: function(){
            return {key: "", value: ""};
        },
        handleChangedKey: function(event){
            var tmpValue = this.state.value;
            this.setState({
                key: event.target.value,
                value: tmpValue
            });
        },
        handleChangedValue: function(event){
            var tmpKey = this.state.key;
            this.setState({
                key: tmpKey,
                value: event.target.value
            });
        },
      render: function(){
            return (
                <div>
                    キー<input type="text" onChange={this.handleChangedKey} />
                    バリュー<input type="text" onChange={this.handleChangedValue} />
                </div>
            );
        }
});

コードの一部を切り出したもので、これらkeyとvalueは別のコンポーネントで利用しています。

###質問
上記ですと、keyとvalueのどちらか片方が変わっただけでも、毎回両方のデータをthis.setState関数でセットしなおしています。

こうではなく、変化したほうのデータだけを更新するような方法はあるのでしょうか？

またはあっても推奨されていないのでしょうか？

Answer 1

React.jsのsetStateでは、引数として渡されたデータと元々のstateをマージしますので、変更したい片方だけ書けば大丈夫です。変更しない方を削除して、下記のように書いてもちゃんと動作します。

// 前略
        handleChangedKey: function(event){
            this.setState({
                key: event.target.value
            });
        },
        handleChangedValue: function(event){
            this.setState({
                value: event.target.value
            });
        },
// 後略

Comments

[keisukesatomi]

的確なご回答ありがとうございます。
納得いたしました。。