Creé una lista simple de tareas en la que funciona agregar y eliminar. Mi problema es que, después de enviar una tarea pendiente, el cuadro de entrada no se borra.
Esta es mi aplicación.js
const App = () => { const [toDoList, setToDoList] = useState([]); const [toDo, setToDo] = useState(""); const handleToDo = (event) => { const { value } = event.target; setToDo(value); }; const submit = () => { //const list = toDoList; const newItem = { id: 1 + Math.random(), value: toDo, }; if (newItem.value && !toDoList.includes(newItem.value)) { toDoList.push(newItem); setToDoList([...toDoList]); } }; return ( <div className="container"> Add an Item <br /> <input type="text" placeholder="Type item here..." onChange={handleToDo} /> <button className="add-btn btn-floating" onClick={submit}> <i class="material-icons"> + </i> </button> <br /> <ul> ...display of todos here </ul> </div> ); //} }; export default App;Estoy confundido en cuanto a dónde debo insertar useState para que la entrada se restablezca.
El valor del cuadro de entrada también debe estar regido por el estado. Así que la entrada debería ser como:
<input value={toDo} type="text" placeholder="Type item here..." onChange={handleToDo} />Una vez que haga clic en enviar, restablezca las tareas pendientes para que queden vacías.
const submit = () => { //const list = toDoList; const newItem = { id: 1 + Math.random(), value: toDo, }; if (newItem.value && !toDoList.includes(newItem.value)) { toDoList.push(newItem); setToDoList([...toDoList]); } setToDo(""); };Su entrada parece estar medio controlada. También debe darle a la entrada una propiedad de valor como tal:
<input type="text" placeholder="Type item here..." onChange={handleToDo} value={toDo} />Y ahora puede borrar la entrada cuando se envía una tarea:
const submit = () => { //rest of the code here... setToDo('') //this'll clear out the value of your input };Puede agregar un value al elemento de input . Y después de enviar, configúrelo en una cadena vacía. Asi que:
const App = () => { const [toDoList, setToDoList] = useState([]); const [toDo, setToDo] = useState(""); const handleToDo = (event) => { const { value } = event.target; setToDo(value); }; const submit = () => { //const list = toDoList; const newItem = { id: 1 + Math.random(), value: toDo, }; if (newItem.value && !toDoList.includes(newItem.value)) { toDoList.push(newItem); setToDoList([...toDoList]); setToDo(""); } }; return ( <div className="container"> Add an Item <br /> <input type="text" value={toDo} placeholder="Type item here..." onChange={handleToDo} /> <button className="add-btn btn-floating" onClick={submit}> <i class="material-icons"> + </i> </button> <br /> <ul> {toDoList.map((todoLi) => ( <li>{todoLi}</li> ))} </ul> </div> ); //} }; export default App;