2017-08-18 10 views
0

親を使用してエディターコンポーネントと保存コンポーネントを制御しようとしています。それはコンポーネントをレンダリングしますで私はこれを持って、子からの親状態の印刷に問題がある(ReactJS)

constructor() { 
    super(); 
    this.state = { 
    code: "", 
    current_program: 'new' 
    } 
} 

updateCode(event) { 
    this.setState({ 
    code: event 
    }); 
} 

save() { 
    console.log(this.state.code); 
} 

:親コンポーネントは、これらの機能を持ってい

<IDE code={this.state.code} updateCode={this.updateCode}/> 
<Browser save={this.save.bind(this)} programs={this.props.programs} /> 

IDEが正常に更新呼び出し、私は親にupdateCode機能からの出力をログに記録する場合、それは適切に動作します。しかし...私のブラウザコンポーネントでは、私は以下の持っている:「私は束縛という事実に関係し、これは持っていない、」クリックオン

<Button className="width-30" bsStyle="primary" onClick={() => this.props.save()}> 
    <Glyphicon glyph="save" /> Save 
</Button> 

、それは「印刷し、この」親状態のコードの前に更新されましたか?古い状態を印刷しているだけですか?どうすれば更新できますか?ありがとう。

編集:onChange={this.props.updateCode.bind(this)}

+0

ボタンをクリックすると、 'save'関数が呼び出されていますが、' updateCode'関数の呼び出しはありません – Dekel

+0

コード他のコンポーネントで正常に更新されました。それは、これを含有する: 'のonChange = {this.props.updateCode.bind(本)}' – X88B88

答えて

0

はそれを解決:私はIDEのコンポーネントでCHILDの状態を結合して、それはの実装を変更し、更新されたものだったもので、私は、IDEのコンポーネントからこれを呼んでいますIDEのコンポーネントである親の中で<IDE code={this.state.code} updateCode={this.updateCode.bind(this)}/>が正しく更新されました

+0

は通常あなたがコンストラクタに結合適用: 'this.updateCode = this.updateCode.bind(この);'別の方法としては、使用することができあなたがバベルプリセット 'stage-1'を持っているならば、arrow関数を持つプロパティ初期化子:updateCode =(event)=> {...}' – nbkhope

+0

ところで、あなたは本当に "イベント"をコンポーネントに保存することを意味しましたか?状態、 'event.target.value'の代わりに? – nbkhope

関連する問題