React - 我怎样才能触发一个事件监听器一次？

Question

Let's say I have a button that only fires just once then the listener is removed. I've done this with vanilla Javascript

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

I don't know how can I access this property with React synthetic events since this is putted directly in the component

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

Thanks

Answer 1

You can use useRef to do the same. Demo 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

You can use a variable in state, probably a boolean for this

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

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

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

}

Or you could just return from the 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>

}

I would prefer the second option.

Answer 3

Flip the state once the element has triggered its event:

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