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>
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>
</>
);
}
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.