React-如何只启动一次Event监听器

Question

假设我有一个按钮，它只触发一次，然后侦听器被删除。我用香草Javascript 做到了这一点

const element = document.querySelector('#MyElement');
element.addEventListener('click', handleClick, {once: true});

我不知道如何使用React合成事件访问此属性，因为它直接放在组件中

<button id="MyElement" onClick={handleClick}>Click me!</button>

感谢

Answer 1

您可以使用useRef来执行同样的操作。演示链接在这里

import React, { useEffect, useRef } from "react";
export default function App() {
const ref = useRef();
useEffect(() => {
if (ref.current) {
ref.current.addEventListener("click", () => console.log('Clicked only once'), { once: true });
}
}, []);
return (
<div>
<button ref={ref}>Click on me (Once)</button>
</div>
);
}

Answer 2

const [avoidExtraCall, setAvoidExtraCall] = useState(false);
const handleClick = () => {
if(!avoidExtraCall){
//Do what you want here then
setAvoidExtraCall(true);
//This if statement will only be executed once
}
}
return (
<button id="MyElement" onClick={handleClick}>
Click me!
</button>
);

Answer 3

您可以在状态中使用一个变量，可能是这个的布尔值

function App {
const [buttonClicked, setButtonClicked] = useState(false);
const handleClick = () => {
setButtonClicked(true);
// continue with the function 
}
return <button onClick = {
buttonClicked ? () => {} : handleClick
} > Click < /button>
}

或者你可以直接从手柄返回点击

function App {
const [buttonClicked, setButtonClicked] = useState(false);
const handleClick = () => {
if(buttonClicked){
return; //simply return
}
setButtonClicked(true);
// continue with the function 
}
return <button onClick={handleClick}> Click </button>
}

我更喜欢第二种选择。

Answer 4

元素触发其事件后翻转状态：

handleClick() {
this.setState({
hasTriggered: true
})
}
render() {
return (
<div>
{
!this.state.hasTriggered ?
<MyElement onClick={this.handleClick.bind(this)} /> : null
}
</div>
)
}