从反应组件中分离 eventListener

Question

我有一个 React 组件，我想在遇到事件 (onMouseOver) 时调用一个函数。是否可以在 eventListener 第一次出现后从组件中分离出来？（使用状态将是一种解决方案，但我想知道是否还有另一种）

handleOnMouseOver = () => {
    console.log('event has occured');
}

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

Answer 1

您可以 return 闭包，不会污染状态，并保留标志以在第一次出现后禁用侦听器。

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

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

Answer 2

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

如果是，您将不会 return 在事件处理程序中使用任何回调函数：

class App extends React.Component {

 state = {
  hovered: false
 }

 handleOnMouseOver = () => {
  this.setState({ hovered: true })
  console.log('event has occured');
 }

 render() {
  return (
   <div onMouseOver={!this.state.hovered && this.handleOnMouseOver}>AAAA</div>
  );
 }
}

ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

从反应组件中分离 eventListener

detach eventListener from react component

reactjs

onmouseover

react-component