0

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

introducir la descripción de la imagen aquí

1
  • Será que te falta enlazar el input al state correspondiente? Agrega en el input -> value={input} y vuelve a probar Commented el 21 jun. 2022 a las 18:34

1 respuesta 1

1

Al parecer, sólo te falta enlazar el input a tu state para que pueda comportarse según lo esperado.

<input 
   type="text"
   value={input}
   className="task-input"
   placeholder="¿Algo que hacer?"
   onChange={inputOnchangeHandler}
/>

Y en tu función submit, limpiar el state como ya lo habías probado => setInput('')

Acá te dejo un ejemplo completo basado en tu funcionalidad.

Cualquier duda, nos comentas.

1
  • Hola, perdona que haya tardado en contestar, lo acabo de probar y sí! Parece que funciona, que cosa más tonta lo que me faltaba en realidad, muchas gracias ^^ Commented el 21 jun. 2022 a las 21:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.