为什么“this”在从 HTML 元素调用的 React 函数中为空 [重复]

Question

我有一个简单的 React 代码，如下所示：

export class TodoList extends Component {

  constructor(props) {
    super(props)
    console.log(this)
  }

  addTask() {
    // why is this null 
    console.log(this.textInput)
  }



  render() {
    return (
      <div>
        <input type="text" ref={(input) => {this.textInput = input}}  />
        <button onClick={this.addTask}>Add New Task</button>

        <h6>Pending Tasks</h6>
        <PendingTaskList />

      </div>
    )
  }
}

在 addTask 函数中，“this”的值始终为空。我知道我可以通过绑定它来解决这个问题，但我的问题是为什么它首先是空的。

Answer 1

它为空，因为this 不再引用该类。避免这种情况的最好方法是使用箭头函数。

来自doc：

箭头函数不会创建自己的 this 上下文，所以 this 有 它的原始含义来自封闭的上下文。

addTask = () => {
    console.log(this.textInput)
}