时间戳

首页 > 解决方案 > 在 React setState 函数中使用 e.target.value 的问题

javascript - 在 React setState 函数中使用 e.target.value 的问题

问题描述

我在 React 中遇到了一个奇怪的问题。我想我可能还没有完全掌握 React 是如何工作的，我非常感谢你的帮助。

请在下面找到我的 React 组件：

class myComponent extends Component {
  state = {
    value: ''
  }

  updateValue = e => {
    this.setState({
      value: e.target.value
    })
  }

  render() {
    return (
     <form>
      <input type="text" onChange={this.updateValue} defaultValue={this.state.value} />
     </form>
    )
  }
}

然后，现在如果我在文本字段中输入内容，我将收到以下警告和错误：

警告：出于性能原因，此合成事件被重用。如果您看到这一点，则表示您正在访问已target发布/无效合成事件的属性。这设置为空。如果您必须保留原始合成事件，请使用 event.persist()。

未捕获的类型错误：无法读取 null 的属性“值”

但是，如果我将“updateValue”方法更改为：

updateValue = e => {
    const newValue = e.target.value
    this.setState({
      value: newValue
    })
  }

它将毫无问题地工作。

标签： javascriptreactjs

解决方案

更新的答案

正如@FelixKling 指出的那样，我的回答并不完全正确。我的回答仅在您将函数作为参数传递给 时才有效，而不是像在问题中那样setState传递对象时才有效。

如果将对象传递给setState，则将立即评估参数，即在事件被取消之前。因此，不会发生上述错误。

如果您将函数传递给setState，则将在该函数内评估参数，这发生在updateValue完成/返回并且事件已被取消之后。如果将函数传递给setState，则必须在 之前将 存储e.target.value在变量（或调用e.persist()）中setState。

旧（略有错误）答案

发生此问题的原因是（如错误消息所述）回调（您的updateValue函数）完成时事件设置为 null。

因为this.setState()是异步函数，所以不会立即执行。结果，this.setState()实际上是在你updateValue完成之后执行，因此在事件被取消之后。

您的解决方案实际上是 React 文档中提出的方法！

推荐阅读