React Native 如何使用 removeEventListener

Question

How can I replicate this code in React? I am new to react and I have not been able to get it, thank you very much in advance

 <progress id="bar" value="0" max="110"></progress> <button onclick="increment()" id="increment">one time</button> <button onclick="unlimited()" id="multiple">multiple</button> <script> var puntaje = document.getElementById("bar").value; document.getElementById("increment").addEventListener("click",increment) function increment (e) { e.target.removeEventListener(e.type,increment); document.getElementById("bar").value += 10;} function unlimited (){document.getElementById("bar").value += 10} </script>

Answer 1

Use state to determine if the button has already been clicked once:

const component = () => {
  const [value, setValue] = React.useState(0);
  const [hasIncrementedOnce, setHasIncrementedOnce] =  React.useState(false);

  const increment = () => setValue((current) => current + 10);

  const incrementOnce = React.useCallback(() => {
    if (!hasIncrementedOnce) {
      increment();
      setHasIncrementedOnce(true);
    }
  }, [hasIncrementedOnce])

  return (
    <>
      <progress id="bar" value={value} max="110"></progress>
      <button onClick={incrementOnce} id="increment" disabled={hasIncrementedOnce}>one time</button>
      <button onClick={increment} id="multiple">multiple</button>
    </>
 );

}

Answer 2

How can I replicate this code in React? I am new to react and I have not been able to get it, thank you very much in advance

 <progress id="bar" value="0" max="110"></progress> <button onclick="increment()" id="increment">one time</button> <button onclick="unlimited()" id="multiple">multiple</button> <script> var puntaje = document.getElementById("bar").value; document.getElementById("increment").addEventListener("click",increment) function increment (e) { e.target.removeEventListener(e.type,increment); document.getElementById("bar").value += 10;} function unlimited (){document.getElementById("bar").value += 10} </script>