ReactJS setStateが親コンポーネントから子コンポーネントに伝播しない変更

Question

親子関係を持つ2つの単純なreactjsコンポーネントがあります。子には、onChangeイベントを含む入力と、setStateの親へのコールバックが含まれます。私がそれを実行すると、setStateは親コンポーネントで動作するように見えますが、子コンポーネントに渡された小道具は更新されていないようです。何か案は？ここでは、コードスニペットです：上記の例で

var FooInput = React.createClass({ 
    handleInputChange: function(e) { 
    this.props.onInputChange(e.target.name, e.target.value); 
    }, 
    render: function() { 
    return (
     <div> 
     <input name="foo" value={this.props.foo} onChange={this.handleInputChange} /> 
     </div> 
    ) 
    } 
}) 

var FooApp = React.createClass({ 
    getInitialState: function() { 
    return { 
     foo: 'bar', 
    }; 
    }, 
    handleInputChange: function(key, value) { 
    this.setState({key: value}); 
    }, 
    render: function() { 
    return (
     <div> 
     <FooInput 
      foo={this.state.foo} 
      onInputChange={this.handleInputChange} /> 
     </div> 
    ); 
    } 
}); 

、FooInput子コンポーネント内の入力の値がhandleInputChangeがFooApp親コンポーネントにトリガされ、fooが子供に渡されるという事実にもかかわらず、「バー」としてとどまりますコンポーネント：this.props。新しい状態を反映するために入力値が変化しないのはなぜですか？

Answer 1

this.setState({key: value})を実行して、文字通りkeyという状態変数を設定しています。可変キーが必要な場合は、角かっこを使用できます。

handleInputChange: function(key, value) { 
    this.setState({[key]: value}); 
} 

または新しいオブジェクトを作成します。

handleInputChange: function(key, value) { 
    const newState = {}; 
    newState[key] = value; 
    this.setState(newState); 
}