Question

我最近开始学习React，在将一个回调附加到子元素后，我丢失了＆＃34;这个＆＃34;在父元素中。我正在构建一个简单的任务，并在检查时。我将它发送回父级，以便父级可以删除它并将状态重新分配给没有元素的新数组。但是，我无法访问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")中所示。但有时，我们希望将函数作为回调传递，在这种情况下，调用者不是定义它的对象，~~但是使用回调的那个。~~幸运的是我们有两种方法可以解决了这个问题：

使用.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从闭包中恢复，即从定义它的词汇上下文中恢复。

Answer 2

ES6没有自动绑定功能。所以，这应该在构造函数中手动绑定。

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

REACT反应如何访问正确的＆＃34;这个＆＃34;回调后

2 个答案: