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 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 ^^ el 21 jun. 2022 a las 21:02

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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