React: [bug] React onChange Synthetic / Proxy 事件正在被回收，处理程序去抖动时发出问题

创建于 2016-09-20 · 3评论 · 资料来源: facebook/react

当前的行为是什么？

从 0.14.7 开始确认，但今天也在 15.3.2 发生。

class Foo extends React.Component {
    render(){
    const handleChange = _.debounce(this.props.onChange, 500);
    return <input onChange={handleChange} />
  }
}

ReactDOM.render(<Foo onChange={e => console.log(e.target, e)} />, document.querySelector('div'));

期望得到e.target ，得到null

没有去抖动，按预期工作。 https://jsfiddle.net/dimitar/7ktbfetb/1/

可能与https://github.com/facebook/react/commit/3285d834402a60d241188a1deacf8250b50239cf有关 - 对于https://github.com/facebook/react/blob/master/CHANGELOG.md#react -9

资料来源

DimitarChristoff

最有用的评论

对于任何寻找解决方法的人，您可以使用e.persist()

例如。 return <input onChange={e => handleChange(e.persist()||e)} />

DimitarChristoff 于 2016-09-20

👍3

所有3条评论

对于任何寻找解决方法的人，您可以使用e.persist()

例如。 return <input onChange={e => handleChange(e.persist()||e)} />

DimitarChristoff 于 2016-09-20

👍3

这是因为去抖动是如何工作的。它将使用 setTimeout 将调用推送到下一个事件循环。正如您所指出的，由于池化，这意味着 React 已经将合成事件返回到池中并重置了字段。如果您使用 debounce 或其他任何需要事件存在于 React 事件处理程序之外的东西（例如异步代码），那么您需要持久化。

这是设计使然，所以现在没有什么可做的。 #6190 中有一些关于可能删除池的讨论，这应该使您的代码在没有显式持久化的情况下工作。

zpao 于 2016-09-21

👍2

这与 react 旨在解决数据流、不变性和避免副作用的原则背道而驰。您正在将一个对象传递给一个组件，但它只是一个必须在同一个事件循环中使用的快照，因为您不信任 GC 和可能无意中造成泄漏的用户......

虽然当时这可能是一个好主意，但我们中的一些人只需要支持能够进行足够 GC 的常青浏览器。也许，在重新考虑这种方法的过渡期间，可以设置一个标志/环境变量来关闭池。

DimitarChristoff 于 2016-09-21

👍1

此页面是否有帮助？

0 / 5 - 0 等级

React: [bug] React onChange Synthetic / Proxy 事件正在被回收，处理程序去抖动时发出问题

最有用的评论

所有3条评论

相关问题