ReactJS无法使用event.persist（）设置事件的状态

Z时代
2024-01-10
分类：问答

我需要设置一个从事件中获取的状态字段，但是当我将一个函数传递给它时，它不会被设置。组件和方法如下所示：

constructor(props: SomeProps, context: any) {
  super(props, context);
  this.state = {
    isFiltering: props.isFiltering,
    anchor: "",
  };
}
private toggleFilter = (event: any) => {
  event.persist()
  this.setState(prevState => ({
    isFiltering: !prevState.isFiltering,
    anchor: event.currentTarget // does not work, it's null
  }));
}

如果删除，event.persist()则会出现以下错误：

由于性能原因，此综合事件被重用。如果看到此消息，则说明正在currentTarget释放/无效化的合成事件上访问该方法。这是一项无操作功能。如果必须保留原始的合成事件，请使用event.persist（）。有关更多信息，请参见https://facebook.github.io/react/docs/events.html#event-
pooling。

由于某些原因，以下代码可以工作：

private toggleFilter = (event: any) => {
  this.setState({anchor:event.currentTarget}) // works fine
  this.setState(prevState => ({
    isFiltering: !prevState.isFiltering,
  }));
}

为什么以上方法有效，但在我使用时无效this.setState(prevState=> ...)？

回答：

，因为event.persist()这并不意味着currentTarget没有被取消，实际上应该是-与浏览器的本机实现兼容。

这意味着，如果要以异步方式访问currentTarget，则需要像在答案中一样将其缓存在变量中。

当事件冒泡时，currentTarget会发生变化–如果在接收事件的元素上有一个事件处理程序，而在其祖先上有其他事件处理程序，则它们将为currentTarget看到不同的值。IIRC消除它与本机事件发生的现象是一致的。如果没有，请告诉我，我们将在这里重新考虑我们的行为。

在官方的React仓库中查看讨论的源代码，以及Sophie提供的以下一些我感动的片段。

var savedEvent;
var savedTarget;
divb.addEventListener('click', function(e) {
  savedEvent = e;
  savedTarget = e.currentTarget;
  setTimeout(function() {
    console.log('b: currentTarget is now ' + e.currentTarget);
  }, 0);
}, false);
diva.addEventListener('click', function(e) {
  console.log('same event object? ' + (e === savedEvent));
  console.log('same target? ' + (savedTarget === e.currentTarget));
  setTimeout(function() {
    console.log('a: currentTarget is now ' + e.currentTarget);
  }, 0);
}, false);
div {
  padding: 50px;
  background: rgba(0,0,0,0.5);
  color: white;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="diva"><div id="divb"> Click me and see output! </div></div>
</body>
</html>