このオブジェクトは、レスキューコンポーネントES6クラスを使用して

Question

私はtextareaとMsgInputコンポーネントを持っていますonKeyUpは、ハンドラ関数をトリガします。ハンドラ関数の中で、私はthis.propsを使って小道具を読むことを試みますが、なぜ小道具がここで定義されていないのか分かりません。もちろん、作業場はです。

Answer 1

ES6クラスに反応すると、コールバックがコンポーネントインスタンスに自動的にバインドされないため、既に行ったように自分で行う必要があります。それ以外の場合は、thisはコールバックで使用できません。

---

this.inputHandler.bind(this) 

これは周りの仕事が、可能になっている方法ではありません。

もう1つの方法は、自動的にthisをバインドするES6矢印機能を使用することです。

<textarea onKeyDown={(e) => this.inputHandler(e)}></textarea> 

---

警告：あなたJSX内.bindまたは矢印の機能を使用するには、すべてのパフォーマンスの障害となっているレンダリングの新しい関数を作成します。

最後の手段として、矢印関数のパフォーマンス上のペナルティを持たないコンストラクタ内のメソッドをバインドできます。

constructor(props) { 
    super(props); 
    this.inputHandler = this.inputHandler.bind(this); 
}