Estoy haciendo un To Do con React. Tengo un formulario con una entrada de texto <input>
y un button
que hará de submit; el componente del formulario, tiene un onSubmit que le pasa por props una función que es la siguiente:
const buttonOnsubmitHandler = evento =>{
evento.preventDefault();
console.log('enviando formu')
const tareaNueva = {
id: uuidv4(),
text: input,
complete: false
}
props.onSubmit(tareaNueva)
}
Aquí podéis ver un poco cómo está la estructura del form
hecha componente
return (
<form
className="taskForm-wrapper"
onSubmit={buttonOnsubmitHandler}
>
<input
type="text"
className="task-input"
placeholder="¿Algo que hacer?"
name="text"
onChange={inputOnchangeHandler}
/>
<button
className="task-button"
>
Añadir tarea
</button>
</form>
)
La forma de gestionar el estado del input
obviamente lo hago con el Hook { useState }
Aquí podéis ver como va tomando cada valor el input
const [input, setInput] = useState('');
const inputOnchangeHandler = evento =>{
setInput(evento.target.value)
}
Por si es más fácil reconocer las partes, compartiré el componente entero también.
function TaskForm(props) {
const [input, setInput] = useState('');
const inputOnchangeHandler = evento =>{
setInput(evento.target.value)
}
const buttonOnsubmitHandler = evento =>{
evento.preventDefault();
console.log('enviando formu')
const tareaNueva = {
id: uuidv4(),
text: input,
complete: false
}
props.onSubmit(tareaNueva)
}
return (
<form
className="taskForm-wrapper"
onSubmit={buttonOnsubmitHandler}
>
<input
type="text"
className="task-input"
placeholder="¿Algo que hacer?"
name="text"
onChange={inputOnchangeHandler}
/>
<button
className="task-button"
>
Añadir tarea
</button>
</form>
)
}
export default TaskForm
Mi pregunta es la del título, actualmente si le doy a enviar, el texto que halla en el input se mantiene, y quería que en ese momento de enviar, pasase a estar vacío y que el usuario si quiere, escriba una nueva palabra.
He probado en la función del Handler del botón, a actualizar el valor del propio input con setInput(' ')
, pero hacer esto me rompe la aplicación. ¿Se os ocurre algo?
Adjunto imagen
value={input}
y vuelve a probar