React Native 如何使用 removeEventListener

Question

我如何在 React 中復制這段代碼？ 我是新來的反應，我一直無法得到它，非常感謝你提前

 <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

使用 state 判斷按鈕是否已經被點擊過一次：

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

如何在 React 中復制此代碼？ 我是新來的反應，我一直無法得到它，非常感謝你提前

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