Question

我在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（）。

未捕获的TypeError：无法读取null的属性“值”

但是如果我将'updateValue'方法更改为：

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

它将正常工作。

Answer 1

更新后的答案

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

如果将 object 传递给setState，则将立即对参数求值，即在事件无效之前。因此，不会发生上述错误。

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

旧的（略有错误）答案

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

由于this.setState() is an asynchronous function，它将不会立即执行。结果，this.setState()实际上是在您完成updateValue之后，因此在事件被取消之后才执行的。

您的解决方案实际上是the proposed way from the React docs！

Answer 2

已合并SyntheticEvent。这意味着在调用事件回调之后，将重新使用SyntheticEvent对象，并且所有属性都将无效。这是出于性能原因。因此，您不能以异步方式访问事件。

基本上，由于React的事件池，在异步e中无法访问click事件（setState()），除非您使用event.persist()（如收到的警告中所述）。

反应事件池： https://reactjs.org/docs/events.html

Answer 3

如果有人正在寻找使这项工作的方法。这里有一个剪辑。

using

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

3 个答案: