イベントが設定されているときのイベント

Question

In React this.setStateでは、状態を設定します。たとえば、私はnameの状態をThomasに設定します。

this.setState({'name': 'Thomas'}) 

私は別のオブジェクトが必要です。他の状態プロパティを含む状態プロパティ。たとえば以下のようになります。

let name = 'Thomas' 
this.setState({name}) 

console.log(this.state.data) // => undefined 

let age = '26' 
let data = {age} 
this.setState(data) 

console.log(this.state.data) {data: {age: '26'}} 

this.stateChanged(state => { 
    let data = state.data || {} 
    if (state.name) data.name = state.name 
    this.setState({data}) 
}) 

this.setState({name}) 

console.log(this.state.data) // => {data: {age: '26', name: 'Thomas'}} 

Reactに相当するthis.stateChangedメソッドはありますか？

Answer 1

Reactは、状態が変更されたとき、またはコンポーネントが更新されたときを判断するためのカップルの明示的なオプションを提供します。

1. setState(function|object nextState, [function callback])で提供するコールバックを使用します：第三の選択肢は、あなたの特定のケースのための暗黙的なアプローチのより多くのものdocumentationパー

   onClick(e) { 
       this.setState({ 
        foobar: e.target.value 
       }, this.doAfter) 
   } 
   doAfter() { 
       console.log(`Just set FOOBAR to ${this.state.foobar}`) 
   } 
   

   を、我々は後に呼び出されるために、この方法に頼ることができます状態は非同期に設定されました。

2. はcomponentDidUpdateライフサイクルメソッドを使用しますdocumentationパー

   componentDidUpdate() { 
       console.log(`Component updated: Foobar is ${this.state.foobar}`) 
   } 
   

   をコンポーネント自体をレンダリングした後、この機能は、それによって我々は、最新の状態変化へのアクセス権を持って保証し、すぐに呼び出されます。

3. render()メソッドですべての必要な情報をコンパイルします（state）。

   render() { 
       const compilation = {foobar: `${this.state.foobar}-bar`} 
       return (
        <div>...</div> 
       ) 
   } 
   

   基本的には、ちょうどあなたがしかし、上記の最初の2つのオプションがニーズのためのより良いだけで十分かもしれませんが、render()からJSXオブジェクトを返す前にそれを希望する方法オブジェクトを構成します。

例

http://codepen.io/mikechabot/pen/KzyVVw?editors=0011