REACTコールバックの後で正しいthisにアクセスする方法

Question

最近、Reactの学習を開始し、コールバックを子要素に付加した後、親要素で「this」の参照が失われました。私は単純なタスクを構築しており、チェックされています。親がそれを削除し、要素を持たない新しい配列に状態を再割り当てできるように、親に返す。しかし、私はthis.state.todosTaskにアクセスできません。私は未定義になる。 以下は私のコードです。

Parent Element TodoList 

constructor(props){ 
    super(props); 
    this.state ={ 
     todosTask: props.todos 
    } 
    } 
    handleCheckedTask(task){ 
    console.log("Now Im in the todost"+task) 
    this.state.todosTask //= Undefined 
    } 
    render(){ 
    return(
     <div> 
     <h4>Todo List</h4> 
     <div className="form-check"> 
     <label className="form-check-label"> 
      {this.state.todosTask.map((todoElement)=>{ 
       return <Todo todo={todoElement} key={todoElement.id} onCheckedTask={this.handleCheckedTask}/> 
      })} 
     </label> 
     </div> 
     </div> 
    ) 
    } 

子コンポーネント

completed(event){ 
    let self = this 
    let task = self.props.todo.task 
    let id = self.props.todo.id 
    console.log(self.refs.complete) 
    this.props.onCheckedTask({id:id,task:task}) 
    } 
    render(){ 
    return(
     <div> 
     <input 
     className="form-check-input" 
     type="checkbox" 
     ref="complete" 
     onChange={this.completed.bind(this)}/> 
     {this.props.todo.task} 
     </div> 
    ) 
    } 
} 

Answer 1

コンストラクタのhandleCheckedTaskをこれにバインドする必要があります。

説明：JavaScriptでは、関数やメソッドは、Javaのように、他の言語と同様に、オブジェクトを含むオブジェクトにバインドされていません。 JavaScriptのthisは動的で、（ほとんどの場合）「関数の呼び出し元」を意味します。ほとんどの場合、それは違いはありません。普通は、オブジェクトを含むオブジェクトを呼び出す方法です（console.log("foo")など）。しかし、時には、関数をコールバックとして渡したい場合があります。この場合、呼び出し元は定義されているオブジェクトではなく、ですが、コールバックを使用しているオブジェクトです。

1. オブジェクトにメソッドをバインド、.bind()
2. は、関数にthisを渡すと語彙的文脈からそれを取得しないと：幸い、私たちはこの問題を解決するには2つの方法があります。 （すなわち、矢印機能を使用する）。

。

constructor(props){ 
    super(props); 
    this.state = { 
     todosTask: props.todos 
    }; 
    this.handleCheckedTask = this.handleCheckedTask.bind(this); 
} 

また、プロパティ初期化子を使用してハンドラを定義することもできます。私は、コールバックの呼び出し側は、それを呼び出したオブジェクトであると述べた部分を削除：

handleCheckedTask = (task) => { 
    console.log("Now Im in the todost"+task) 
    this.state.todosTask //= Undefined 
    } 

あなたは詳細here

編集を確認することができます。通常、コールバックの場合、thisは通常の関数（矢印関数ではありません）では未定義です。矢印関数thisは、クロージャから、つまり定義された字句コンテキストから復元されます。

Answer 2

ES6は、このバインディング自動持っていません。したがって、これはコンストラクタで手動でバインドする必要があります。

constructor(props){ 
    super(props); 
    this.state = { 
     todosTask: props.todos 
    }; 
    this.handleCheckedTask = this.handleCheckedTask.bind(this); 
}