从react组件中分离eventListener

Question

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

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

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

Answer 1

你可以返回一个闭包，而不会污染状态，并在第一次出现后保留一个标志来禁用监听器。

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

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

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

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'>