このキーワードをいつreactのイベントハンドラにバインドするか？

Question

だから、送信ボタン付きの単純な入力フィールドであるSearchという名前のクラスがあるとします。ここにそのコードがあります。

class Search extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {term: ''}; 

     this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
     console.log(this); 
     console.log(e.target.value); 
     this.setState({term: e.target.value}); 
    } 

    render() { 
     return (
       <form className='input-group'> 
        <input className='form-control' 
        placeholder='City' 
        onChange={this.handleChange} 
        value={this.state.value}/> 
        <span className='input-group-btn'> 
         <button type='submit' className='btn btn-primary'>Submit</button> 
        </span> 
       </form> 
     ) 
    } 
} 

だから、私はそれがhandleChangeイベントハンドラ内thisへの正しい参照を持つように、クラスのコンストラクタ内で、イベントハンドラ、handleChangeにthisキーワードをバインドする必要があります。しかし

、私は

    value={this.state.value}/> 
        <span className='input-group-btn'> 
         <button type='submit' className='btn btn-primary'>Submit</button> 
        </span> 
       </form> 
     ) 
    } 
} 

上記

} 

    handleChange(e) { 
     console.log(this); 
     console.log(e.target.value); 
     this.setState({term: e.target.value}); 
    } 

    render() { 
     return (
       <form className='input-group'> 
        <input className='form-control' 
        placeholder='City' 
        onChange={(e) => this.handleChange(e)} 

ラインの変更の上に次の

class Search extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {term: ''}; 

     //this.handleChange = this.handleChange.bind(this); 

行コメントにコードを変更した場合

コードを上記に変更すると、コールバックの内部からthis.handleChangeを呼び出すため、これを行う必要はありません。これはなぜですか？

Answer 1

理由は、コールバックを作成するときにarrow functionを使用するためです。

矢印関数は「この値を字句的にバインドする」ため、矢印関数をこの関数にバインドする必要はありません。

必要に応じて、イベントハンドラ関数を矢印関数に変更して、バインドする必要がなくなります。矢印機能を持つ透明クラスには、バベルプラグイン'transform-class-properties'を追加する必要があります。

あなたは矢印関数にhandleChangeを変更したい場合は、単にあなたが考慮しなければならない何

handleChange = (e) => { 
    ... 
} 

Answer 2

に

handleChange(e) { 
    ... 
} 

を変更すると、あなたはthisは、メソッドの内部に評価されます期待しているもので、これはではなく、のコールバックのみに限定されています。あなたは、あなたがReact.Componentから継承したクラスを作成するときに、それが定義されているあなた含むクラスの本体であることをthisを期待しているthis.setStateを参照しているあなたのhandleChange方法の場合

。

onClickのようなDOMオンイベントハンドラが呼び出されると、ハンドラ内のthisキーワードが、呼び出されたDOM要素に設定されます。参照：Event handlersおよびthis on in-line handler。

推測できるように、DOM要素にはsetStateメソッドがありません。そのため、望ましい結果を得るには、これを正しいスコープ/コンテキストにバインドする必要があります。

これはで実現できます。バインド（）または=>（arrow function）、後者は、それ自身の独自のスコープ/コンテキストを定義し、それが中に封入されたスコープ/コンテキストを使用しない。

Iはthisの再定義は、単にない以前に言ったようにDOM on-eventコールバックに限定されています。もう1つの例は、.map()メソッドを呼び出すときです。ここでは、コンテキスト値を第2引数として渡すことによってthisのコンテキストを定義できます。