reactjs 函数setState中的事件目标为空

fdbelqdn 于 2023-02-22 发布在 React

关注(0)|答案(1)|浏览(140)

考虑某些组件的以下功能：

handleInputChange(e) {
    // let val = e.target.value; - if I uncomment this, it works.

    // Update text box value
    this.setState(function (prevState, props) {
        return {
          searchValue: e.target.value,
        }
    })
}

以及输入，其由上述组件的子组件呈现，并且接收handleInputChange作为props：

<input type="text" onChange={that.props.handleInputChange} value={that.props.searchValue} />

当我在输入中输入一些东西时，我得到错误Cannot read property 'value' of null。
如果我取消注解handleInputChange函数中的第一行，我在val变量中存储输入值，它工作得很好。

reactjs

来源：https://stackoverflow.com/questions/44708518/event-target-is-null-inside-functional-setstate

1条答案

按热度按时间

fslejnso1#

这是因为react在版本17之前是做事件池的--回调完成后所有事件的字段都被置空，所以你在异步setState回调中看到它们是空的。
请将事件数据复制到变量或调用event.persist()以禁用此行为。

handleInputChange(e) {
  e.persist();

  this.setState(function (prevState, props) {
      return {
        searchValue: e.target.value,
      }
  })
}

或者：

handleInputChange(e) {
  const val = e.target.value;

  this.setState(function (prevState, props) {
      return {
        searchValue: val
      }
  })
}

请参见以下示例：
一个二个一个一个

赞(0）回复(0）举报 2023-02-22

我来回答

reactjs 函数setState中的事件目标为空

1条答案

相关问题

热门标签

最新问答