отсоединить eventListener от реагирующего компонента

Question

У меня есть компонент реагирования, и я хотел бы вызвать функцию при возникновении события (onMouseOver).Можно ли отсоединить eventListener от компонента после его первого появления?(использование состояний было бы решением, но мне интересно, есть ли другое)

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

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

Answer 1

Вы можете сохранить значение в своем состоянии, указывающее, произошло ли ваше событие или нет.

Если это произошло, вы не вернете никакую функцию обратного вызова в свой обработчик событий:

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

Answer 2

вы можете вернуть замыкание, не загрязняя состояние, и оставить флажок для отключения прослушивателя после первого вхождения.

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

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