从反应组件中分离 eventListener
detach eventListener from react component
我有一个 React 组件,我想在遇到事件 (onMouseOver) 时调用一个函数。是否可以在 eventListener 第一次出现后从组件中分离出来? (使用状态将是一种解决方案,但我想知道是否还有另一种)
handleOnMouseOver = () => {
console.log('event has occured');
}
render() {
return(
<div onMouseOver={this.handleOnMouseOver}>
);
}
您可以 return 闭包,不会污染状态,并保留标志以在第一次出现后禁用侦听器。
handleOnMouseOver = () => {
let isActive = true;
return (evt) => {
if(isActive) {
console.log('event has occured');
isActive = false; // disable listener
}
}
render() {
return(
<div onMouseOver={this.handleOnMouseOver()}>
);
}
您可以在您的状态中存储一个值,指示您的事件是否已经发生。
如果是,您将不会 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'>
我有一个 React 组件,我想在遇到事件 (onMouseOver) 时调用一个函数。是否可以在 eventListener 第一次出现后从组件中分离出来? (使用状态将是一种解决方案,但我想知道是否还有另一种)
handleOnMouseOver = () => {
console.log('event has occured');
}
render() {
return(
<div onMouseOver={this.handleOnMouseOver}>
);
}
您可以 return 闭包,不会污染状态,并保留标志以在第一次出现后禁用侦听器。
handleOnMouseOver = () => {
let isActive = true;
return (evt) => {
if(isActive) {
console.log('event has occured');
isActive = false; // disable listener
}
}
render() {
return(
<div onMouseOver={this.handleOnMouseOver()}>
);
}
您可以在您的状态中存储一个值,指示您的事件是否已经发生。
如果是,您将不会 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'>