tengo problemas para que mi UseState se muestre solo una vez que hago clic en un botón, actualmente tengo una función que usa usestate y muestra mi valor en la pantalla, por ejemplo, cuando escribo "miki" en el cuadro de entrada, lo hará mostrar "miki" en la pantalla, sin embargo, sucede cuando hago clic en el cuadro de entrada, y quiero que suceda cuando presiono el botón, este es mi código hasta ahora:
import react, { useState } from "react"; export const ShoppingListPageContainer = () => { const [name, setName] = useState(``) const nameChange = (event) => { setName(event.target.value) } return <div> <input label="name: " id="name" onClick={nameChange} /> <input type="number" name="quantity" /> <button> Add </button> <p> {name} </p> </div> }como puede ver, onClick está en la entrada y es por eso que funciona al presionar el cuadro de entrada, pero cuando cambio la ubicación de onClick al botón, no muestra nada, porque no hay ningún valor insertado en el botón, obviamente, cualquier ¿ayuda?
Está utilizando la propiedad onClick (en onClick={nameChange} ). Esto significa que su función nameChange se llama cada vez que un usuario hace clic en el cuadro de entrada.
Debe cambiar esto a onChange={nameChange} y agregar el value={name} a la entrada:
<input label="name: " id="name" onChange={nameChange} value={name} /> Esto significa que se llama a la función nameChange cada vez que cambia la entrada. El valor también se establecerá en name, por lo que si algo más llama a nameChange , se reflejará en el cuadro de entrada.
Utilice el evento onChange en el campo de entrada. Y use el gancho useEffect y su dependencia para obtener los datos actuales
useEffect(() => { console.log('name', name); }, [name]) <input type="string" onChanhe={(e:any) => nameChange(e.target.value)} /> <p>{name}</p>