親のコンポーネントのプロパティを更新します。

Question

子のプロパティを変更しようとしましたが失敗しました。私は反応のライフサイクルの方法のほとんどを試しましたが、それらのどれも働かないようでした（didMount propsUpdateなど）。

すべてのヘルプは、私はあなたの質問から理解するものから

http://codepen.io/yogainalift/pen/KMPvNz

var Field = React.createClass({ 
    getInitialState: function() { 
    return { 
     message: this.props.setMessage || 'should change this one' 
    } 
    }, 

    render() { 
    return (
     <div> 
     {this.state.message} 
     </div> 
    ) 
    } 
}); 

var App = React.createClass({ 
    getInitialState: function() { 
    return { 
     inputField: '' 
    } 
    }, 

    handle(event) { 
    console.log(event.target.value); 
    this.setState({ 
     inputField: event.target.value 
    }) 
    }, 

    render() { 
    return (
     <div> 
     <input type='text' placeholder='changing this text' onChange={this.handle}/> 
     <Field setMessage={this.state.inputField} /> 
     </div> 
    ) 
    } 
}); 

ReactDOM.render(<App />, document.getElementById('app')); 

Answer 1

をいただければ幸いです、あなたはフィールドに入力と同じレンダリング持つようにしようとしている、私は右ですか？

あなたのフィールドコンポーネントは、あなたがまた、フィールドのための新しい状態を設定するcomponentWillReceivePropsライフサイクルメソッドを使用することができ

<div> 
    {this.props.setMessage} 
</div> 

を使用する必要があります

<div> 
    {this.state.message} 
</div> 

上のコンテンツをレンダリングするために状態を使用しています。 コードは次のようになります。

componentWillReceiveProps: function(nextProps) { 
    this.setState({ 
    message: nextProps.setMessage || 'should change this one' 
    }); 
} 

はそれがお役に立てば幸いです。