Actualmente estoy aprendiendo el concepto de ganchos en React y tratando de entender el siguiente ejemplo.
import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }El ejemplo anterior incrementa el contador en el propio parámetro de la función del controlador. ¿Qué pasa si quiero modificar el valor de conteo dentro de la función del controlador de eventos?
Considere el siguiente ejemplo:
setCount = () => { //how can I modify count value here. Not sure if I can use setState to modify its value //also I want to modify other state values as well here. How can I do that } <button onClick={() => setCount()}> Click me </button>Los ganchos de reacción son una nueva forma (todavía en desarrollo) de acceder a las características principales de reaccionar, como el state , sin tener que usar clases, en su ejemplo, si desea incrementar un contador directamente en la función del controlador sin especificarlo directamente en la propiedad onClick , podrías hacer algo como:
... const [count, setCounter] = useState(0); const [moreStuff, setMoreStuff] = useState(...); ... const setCount = () => { setCounter(count + 1); setMoreStuff(...); ... };y al hacer clic:
<button onClick={setCount}> Click me </button>Expliquemos rápidamente lo que está pasando en esta línea:
const [count, setCounter] = useState(0); useState(0) devuelve una tupla donde el primer parámetro count es el estado actual del contador y setCounter es el método que nos permitirá actualizar el estado del contador. Podemos usar el método setCounter para actualizar el estado de count en cualquier lugar. En este caso, lo estamos usando dentro de la función setCount donde podemos hacer más cosas; la idea con los ganchos es que podemos mantener nuestro código más funcional y evitar los componentes basados en clases si no se desea/necesita.
Escribí un artículo completo sobre ganchos con varios ejemplos (incluidos contadores) como este codepen , useState , useEffect , useContext y ganchos personalizados . Podría entrar en más detalles sobre cómo funcionan los ganchos en esta respuesta, pero la documentación hace un muy buen trabajo al explicar el gancho de estado y otros ganchos en detalle, espero que ayude.
actualización: los ganchos ya no son una propuesta , desde la versión 16.8 ahora están disponibles para ser utilizados, hay una sección en el sitio de React que responde algunas de las preguntas frecuentes .
La sintaxis del gancho useState es sencilla.
const [value, setValue] = useState(defaultValue)
Si no está familiarizado con esta sintaxis, vaya aquí .
Le recomendaría que lea la documentación . Hay excelentes explicaciones con una cantidad decente de ejemplos.
import { useState } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // its up to you how you do it const buttonClickHandler = e => { // increment // setCount(count + 1) // decrement // setCount(count -1) // anything // setCount(0) } return ( <div> <p>You clicked {count} times</p> <button onClick={buttonClickHandler}> Click me </button> </div> ); }