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”的值始终为null。我知道我可以通过绑定它来解决这个问题，但我的问题是为什么它首先是空的。

Answer 1

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

来自doc：

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

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

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

1 个答案: