Reactの状態変更コールバックにどのように値を渡しますか？

Question

は私がSETSTATE後、次の無名関数のコールバックを持っている：

processOnBlur(event) { 
     this.setState({ 
     input: event.target.id 
     }, (event) => { 
     console.log(event.target.id); 
     }); 
    } 

しかし、コールバック内部eventは未定義です。そのコールバックにイベントオブジェクトを渡すにはどうしたらいいですか？それも可能ですか？

Answer 1

状態変化が発生した後に、その関数を実行しますsetState()に関数コールバックを渡すものでこの場合、正しく渡された場合でも、イベントターゲットはコールバック内でnullになります（状態が変更され、コンポーネントが再レンダリングされ、Reactによってイベントが消去され、ターゲットがなくなります）。

processOnBlur(event) { 
    this.setState({ 
    input: event.target.id 
    },() => { 
    console.log(this.state.input); 
    }); 
} 

：

あなたが最初のオフに、この問題を解決することができるいくつかの方法がありますが、あなたはちょうどあなたが状態を通して、あなたのコールバック関数で、それへのアクセス権を持っている意味event.target.idに等しくなるように入力の状態を設定しました

もう1つのオプションは入力にrefを設定することです。これはReact機能であり、クラス・ファンクション内で自由に使用できるコンポーネントへの参照を提供します。あなたの入力にそう

：

processOnBlur(event) { 
    this.setState({ 
    input: event.target.id 
    },() => { 
    console.log(this.refs.myInput.id); 
    }); 
} 

// You could also use it to set your input state if you really wanted to, 
// though event.target is probably more appropriate. 
// 
// input: this.refs.myInput.id 

---

EDIT：私は忘れてしまった余分な方法

<input id="username" 
     type="text" 
     ref="myInput" 
     onBlur={(e) => this.processOnBlur(e)} /> 

次にあなたがそうのように、this.refs.myInputを通して、あなたのイベントハンドラでアクセスすることができます（この状況では最も単純な場合もあります）は、イベントハンドラに渡されたイベントのevent.persist()を呼び出します。

processOnBlur(event) { 
    event.persit(); 

    this.setState({ 
    input: event.target.id 
    },() => { 
    console.log(event.target.id); 
    }); 
} 

これにより、Reactがイベント参照をワイプしてアクセス権を保持することを防ぎます。

Answer 2

あなたはeventとも呼ばれる新しい変数であなたのeventオブジェクトを隠しています - 矢印関数のカッコ内のものは、あなたが渡しているものではなくパラメータです。 ：

processOnBlur(event) { 
    this.setState({ 
     input: event.target.id 
    },() => { 
     console.log(event.target.id); 
    }); 
} 

効果的に前のに対し、あなたがやっていた：

function callback(event) { // This is a different event parameter! 
    console.log(event.target.id); 
} 

processOnBlur(event) { 
    this.setState({ 
     input: event.target.id 
    }, callback); // See? You're not actually passing event in 
}