Question

免责声明：要快速查看问题，请see this pen并在那里输入内容。

实施

我的渲染方法有这个JSX代码：

<input
  value={this.state.value}
  onChange={this.handleChange}
/>

然后这是我的handleChange方法：

handleChange(e) {
  const { onChange } = this.props;

  this.setState({
    value: e.target.value,
  }, () => {
    onChange({ value: e.target.value });
  });
}

问题

问题在于handleChange方法，在设置状态时，e.target包含输入元素，但在setState方法的回调中，e.target是null（因此未调用onChange方法）。

是的，它有一个明显的解决方法

当然，如果我在触发setState之前设置var来存储目标，我可以在回调上使用该目标。但是我想理解为什么e正在更新（并且目标被从那里删除），如果这只是一个问题或它应该如何工作。同样，this pen将显示问题。

Answer 1

你遇到了what React passes you are actually synthetic events, that are recycled这一事实的后果。引用文档：

汇集SyntheticEvent。这意味着SyntheticEvent 对象将被重用，所有属性将在之后无效已调用事件回调。

解决方法是预先存储目标，或者按照文档说的那样存储目标，然后调用event.persist()

Answer 2

React对事件进行垃圾处理，因此它会在回调发生之前删除该事件。

你可以做e.persist()并且它会正常工作，这可以确保事件挂起并且不会被擦掉。

正在更新的反应事件更改

实施

问题

是的，它有一个明显的解决方法

2 个答案: