REACT React如何在回調後訪問正確的「this」

我最近開始學習React，並且在將回調附加到子元素後，我在父元素中丟失了「this」的引用。我正在構建一個簡單的任務，並在檢查時進行。我將它發送回父項，以便父項可以將其刪除並將狀態重新分配給沒有元素的新數組。但是，我沒有訪問this.state.todosTask。我弄不明白。以下是我的代碼。REACT React如何在回調後訪問正確的「this」

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> 
    ) 
    } 
}

來源

2016-08-22 Brian Bier

您需要將構造函數中的handleCheckedTask與此綁定。

說明：在JavaScript函數和方法中，不像其他語言那樣綁定到包含對象，就像在Java中一樣。在javascript this是動態的，它（主要）是指「函數的調用者」。對於大多數情況，這並沒有什麼不同，因爲我們通常通過包含對象調用方法，如console.log("foo")。但有時候，我們想要將該函數作爲回調函數傳遞，在這種情況下，調用者不是定義它的對象，而是使用回調函數的對象。幸運的是我們有2種方法來解決這個問題：

綁定方法的一個對象，.bind()
若沒有通過this的功能和從詞彙方面得到它。（即使用箭頭功能）。

。

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從閉包中恢復，也就是從定義它的詞法上下文中恢復。

來源

2016-08-22 16:50:37

完美。將它綁定到構造函數給了我整個類的控制權。我很困惑，爲什麼我必須手動綁定它。你可以請解釋當我手動綁定它在構造函數中發生了什麼。 –

我爲我的回覆添加了一個解釋。 –

ES6沒有自動此綁定。所以，這應該在構造函數中手動綁定。

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

來源

2016-08-22 16:50:28 vijayst

REACT React如何在回調後訪問正確的「this」

回答

相關問題