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

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

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

Answer 1

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

从文档：

arrow函数不会创建自己的上下文，因此它具有封闭上下文的原始含义。

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