Cada vez que configuro un estado en mi aplicación React, borra mis entradas (casilla de verificación, números). Aquí hay una versión muy básica que ilustra el problema.
import React, { useState } from "react"; export default function App() { const [dummy, setDummy] = useState(false); function handleMint() { setDummy((dummy) => !dummy); } const MintBTN = () => ( <div> <div> <input className="form-control" type="number" max="20" min="1" /> <div> <input type="checkbox" /> </div> </div> <div> <button onClick={handleMint}>mint</button> </div> </div> ); return <MintBTN />; }Puedes probarlo tú mismo. Agregue números y haga clic en la casilla de verificación y presione Mint. Whamo-bamo, tus entradas desaparecen mágicamente.
https://codesandbox.io/s/friendly-buck-6g6oh?file=/src/App.js:0-499
Me imagino que hay algo que estoy haciendo mal que todavía no veo. Necesito poder hacer clic en el botón o hacer un evento onChange para las entradas sin que se borre. Por alguna razón, establecer el estado también hace que los estilos de mi página se vuelvan locos. No estoy seguro de lo que está pasando. Algunas de mis dependencias clave si son útiles. Gracias.
"react": "^17.0.2", "webpack": "^4.19.1"Cada vez que establece un estado ( setDummy ), el componente se vuelve a representar y restablecerá sus entradas porque no están uncontrolled . Debe controlled mediante el uso de ganchos de estado para esas entradas.
import React, { useState } from "react"; export default function App() { const [dummy, setDummy] = useState(false); const [number, setNumber] = useState(0); const [checked, setChecked] = useState(false); function handleMint() { setDummy((dummy) => !dummy); } return ( <div> <div> <input className="form-control" type="number" max="20" min="1" value={number} onChange={e => setNumber(e.target.value)} /> <div> <input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} /> </div> </div> <div> <button onClick={handleMint}>mint</button> </div> </div> ); } Observe el value y las propiedades checked . Están siendo establecidos por el valor del gancho en cada renderizado. Ahora, observe la propiedad onChange . Cada vez que interactúe con la entrada, actualizará el valor del gancho y volverá a representar el componente. Al permitir que React administre el value y las propiedades checked , guardará los valores de las entradas en cada gancho.
Eche un vistazo a los componentes controlados y los ganchos de estado
Se eliminó la función MintBTN como señaló Nicholas Tower
Está creando el componente MintBTN dentro de su componente de aplicación. Esto no funciona. Cada vez que la aplicación se procesa, crea un nuevo tipo de componente. Puede tener el mismo texto que el anterior, pero es un tipo nuevo, por lo que reaccionar necesita desmontar el anterior y montar uno nuevo, que restablece los valores almacenados en cualquier elemento dom y restablece cualquier estado de reacción.
En su lugar, cree el componente una vez fuera de la aplicación.
export default function App() { const [dummy, setDummy] = useState(false); function handleMint() { setDummy((dummy) => !dummy); } return <MintBTN onClick={handleMint} />; } const MintBTN = ({ onClick }) => { return ( <div> <div> <input className="form-control" type="number" max="20" min="1" /> <div> <input type="checkbox" /> </div> </div> <div> <button onClick={handleMint}>mint</button> </div> </div> ); };