Estoy tratando de que los datos del área de texto en el formulario se almacenen en una matriz una vez que el usuario presiona el botón Enviar. Estoy trabajando solo con componentes funcionales. ¿Necesito usar preventDefault() para evitar que la página se actualice para que los datos se transfieran a una matriz? Necesito que el formulario aún se borre después de que el usuario presiona enviar, por lo que si uso preventDefault(), es probable que necesite crear un nuevo componente para restablecer el área de texto.
Agradezco cualquier idea! ¡Gracias por tu tiempo!
function App () { const [value, setValue] = useState(""); const [entrylist, setEntry] = useState([]); const handleChange = () => { setValue([value]) console.log(value) } const readNWrite = () => { setEntry([entrylist]) entrylist.push(value) } return ( <div> <div> Insert Entry </div> <form class="entryForm" > <label for="newEntryId"> <span>New Entry:</span> <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue = {"What's on your mind?"} onChange={(e)=> { handleChange(e.target.value); }} /> </label> <button onClick={readNWrite}>Submit</button> </form> </div> ) }Deberá manejar el evento onSubmit en el formulario. Y como sospechaba, deberá llamar a event.preventDefault() para evitar que el formulario vuelva a cargar la página.
Extraiga los valores del formulario con el constructor FormData . Luego recorra los datos del formulario y agregue cada entrada a una nueva matriz.
Actualice el estado con las nuevas entradas.
function App() { const [entries, setEntries] = useState([]); const handleSubmit = (event) => { event.preventDefault(); const formData = new FormData(event.target); const newEntries = []; for (const [name, value] of formData) { newEntries.push({ name, value }); } setEntries(newEntries); }; /** * This is here to log the changed entrylist state. */ useEffect(() => { console.log(entries); }, [entries]); return ( <div> <div>Insert Entry</div> <form class="entryForm" onSubmit={handleSubmit} > <label for="newEntryId"> <span>New Entry:</span> <textarea id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue={"What's on your mind?"} /> </label> <button type="submit" onClick={readNWrite} >Submit</button> </form> </div> ); }Necesita e.preventDefault() para evitar que ocurra la acción predeterminada del formulario, y eso debe agregarse a su controlador de eventos readNWrite .
No necesita crear un nuevo componente para restablecer su área de texto, porque por lo que puedo ver en su código, está almacenando el texto en [entrylist] . Si bien handleChange maneja el cambio en el área de texto, donde se pasa e.target.value , lo que puede hacer es después de enviar el texto actual a la matriz, puede establecer el value en una cadena vacía como esta,
const handleChange = (e) => { setValue(e.target.value); console.log(value); } const readNWrite = () => { setEntry([entrylist]); entrylist.push(value); setValue(""); }Parece que está tratando de modificar la lista de entradas directamente, lo cual no es algo que pueda hacer. En su lugar, cree una nueva matriz e inserte su valor en eso, luego establezca el valor de entryList usando este nuevo valor.
const readNWrite = () => { const updatedList = [...entrylist]; updatedList.push(value); setEntry(updatedList); }