Question

假设我有一个只触发一次的按钮，然后监听器被移除。我已经用 vanilla Javascript 做到了这一点

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

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

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

谢谢

Answer 1

您可以使用 useRef 来做同样的事情。演示link is here

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

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

function App {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleClick = () => {
    setButtonClicked(true);
    // continue with the function 
  }

  return <button onClick = {
    buttonClicked ? () => {} : handleClick
  } > Click < /button>

}

或者你可以直接从 handleClick 返回

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 3

一旦元素触发了它的事件就翻转状态：

handleClick() {
    this.setState({
        hasTriggered: true
    })
}

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

Answer 4

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>
);

React - 如何只触发一次事件侦听器？

4 个答案: