Creé una aplicación de contador simple en ReactJS. El código está debajo.
import React, { useState } from "react"; import "./styles.css"; export default function App() { const [countNum, setCountNum] = useState(0); function increaseCount() { setCountNum(countNum + 1); } function decreaseCount() { if (countNum > 0) { setCountNum(countNum - 1); } } function disableChecker() { if (countNum === 0) { return true; } else { return false; } } return ( <div className="App"> <button onClick={() => decreaseCount()} disabled={disableChecker()}>Decrease</button> <button onClick={() => increaseCount()}>Increase</button> <h2>{countNum}</h2> </div> ); } Solo quiero saber por qué funciona onClick={() => increaseCount()} Y por qué no funciona onClick={increaseCount()} o onClick={() => increaseCount} .
Un principiante aquí, por favor guíame a la respuesta.
onClick={() => increaseCount()} -> asigna una función como controlador de eventos a onclick . El cuerpo de la función tiene dentro increaseCount() . Entonces, cuando la función se ejecuta (en el desencadenador de eventos), se ejecuta/ejecuta el increaseCount de Cuenta.
onClick={increaseCount()} -> React ejecuta el increaseCount de la cuenta tan pronto como se encuentra este código . increaseCount cambia de estado y provoca un nuevo renderizado, y en el siguiente ciclo de renderizado ocurre lo mismo provocando un ciclo. Esto debería tener renders infinitos.
onClick={() => increaseCount} -> Como el primero pero aquí dentro del cuerpo de la función, () falta después de increaseCount . Esto no ejecuta la función de increaseCount de recuento cuando ocurre el evento. Una declaración simple con el nombre de la función sin paréntesis no hará nada.
¿Por qué se llama a mi función cada vez que se procesa el componente? Asegúrese de no llamar a la función cuando la pase al componente:
render() { // Wrong: handleClick is called instead of passed as a reference! return <button onClick={handleClick()}>Click Me</button> }En su lugar, pase la función en sí (sin paréntesis):
render() { // Correct: handleClick is passed as a reference! return <button onClick={handleClick}>Click Me</button> }Puede usar una función de flecha para envolver un controlador de eventos y pasar parámetros:
<button onClick={() => handleClick(id)} />