0
211
VistasIntento agregar cadenas de un formulario en una matriz al enviar, pero en su lugar me quedo con una matriz de cadenas vacías. Uso de componentes funcionales
Usando componentes funcionales, necesito llenar una matriz con datos de formulario de cadena en Enviar. Se supone que handleSubmit almacena los datos de la cadena, pero cuando uso console.log(value) devuelve una matriz vacía.
No puedo averiguar cómo acceder a la entrada del usuario desde el formulario para que pueda almacenarse en una matriz. Pensé que setValue([value]) sería un método para lograr esto, pero claramente algo no está bien con mi código.
Se supone que read2List toma los datos del value y los almacena en una matriz cuando se hace clic en el botón Enviar. Agradezco cualquier idea! ¡Gracias por tu tiempo!
function App () { const [value, setValue] = useState(""); const [entrylist, setEntry] = useState([]); const handleSubmit = (event) => { event.preventDefault(); setValue([value]) console.log(value) } const read2List = () => { const updatedList = [...entrylist]; updatedList.push(value); setEntry(updatedList); console.log(updatedList); } return ( <div> <div> Insert Entry </div> <form class="entryForm" onSubmit={handleSubmit} > <label for="newEntryId"> <span>New Entry:</span> <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue = {"What's on your mind?"} /> </label> <button type="submit" onClick={read2List}>Submit</button> </form> </div> ) }1 Respuestas
Responde la pregunta0
Puedes hacerlo como se muestra a continuación. Simplifiqué tu código. Eliminé la función read2List , ya que puedes hacer lo que quieras con una función. Agregué comentarios en el código. Aquí también hay un CodeSandbox en funcionamiento.
import { useRef, useState } from "react"; export default function App() { const textAreaRef = useRef(); const [entrylist, setEntry] = useState([]); console.log(entrylist); // I added the console log here, to see changes const handleSubmit = (event) => { event.preventDefault(); const updatedList = [...entrylist]; updatedList.push(textAreaRef.current.value); textAreaRef.current.value = ""; // clear the input after submit setEntry(updatedList); }; return ( <div> <div> Insert Entry </div> <form className="entryForm" onSubmit={handleSubmit}> <label htmlFor="newEntryId"> <span>New Entry:</span> <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75" defaultValue="What's on your mind?" ref={textAreaRef} /> </label> <button type="submit">Submit</button> </form> </div> ); }Para saber más sobre el manejo de entradas en React, visite esta página de la documentación oficial.