Reactjs 从react组件分离eventListener

我有一个react组件，我想在遇到事件时调用一个函数（onMouseOver）。在组件首次出现后，是否可以将eventListener与组件分离？（使用状态将是一个解决方案，但我想知道是否还有其他解决方案）

handleOnMouseOver=（）=>{
console.log（'事件已发生'）；
}
render（）{
返回(
);
}

您可以在不污染状态的情况下返回一个闭包，并在第一次出现后保留一个标志以禁用侦听器

handleOnMouseOver = () => {
  let isActive = true;
  return (evt) => {
    if(isActive) {
       console.log('event has occured');
       isActive = false; // disable listener
    }
}

render() {
  return(
    <div onMouseOver={this.handleOnMouseOver()}>
  );
}

handleOnMouseOver=（）=>{
让i主动=真实；
返回（evt）=>{
如果（isActive）{
console.log（'事件已发生'）；
isActive=false；//禁用侦听器
}
}
render（）{
返回(
);
}

您可以在状态中存储一个值，指示事件是否已经发生

如果返回，则不会在事件处理程序中返回任何回调函数：

类应用程序扩展了React.Component{
状态={
悬停：错误
}
handleOnMouseOver=（）=>{
this.setState（{hovered:true}）
console.log（'事件已发生'）；
}
render（）{
返回(
AAAA
);
}
}
ReactDOM.render（，document.getElementById（'root'））

---

使用状态听起来就在这里。

handleOnMouseOver = () => {
  let isActive = true;
  return (evt) => {
    if(isActive) {
       console.log('event has occured');
       isActive = false; // disable listener
    }
}

render() {
  return(
    <div onMouseOver={this.handleOnMouseOver()}>
  );
}