0

Me encuentro aprendiendo React y estoy realizando un pequeño ToDoList, me gustaría que cuando se termine de rellenar el título de la tarea y la descripción de la misma, al momento de presionar enter en el teclado, se haga una especie de 'autofocus' a mi botón de 'Guardar', tengo entendido que esto se podría hacer con JS. Les dejo mi código por acá.

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(title, description);
    createTask({
      title,
      description,
    });
    settitle(""), setDescription("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="Task"
        placeholder="Escribe tu tarea"
        onChange={(e) => {
          settitle(e.target.value);
        }}
        value={title}
        autoFocus
      />
      <textarea
        placeholder="Escribe la descripción de la tarea"
        onChange={(e) => setDescription(e.target.value)}
        value={description}
      ></textarea>
      // Creo que la funcionalidad de la que hablo debería ir acá como un evento del botón
      <button>Guardar</button>
    </form>
  );
}

Realicé toda la lógica de limpiar el pequeño formulario cuando el usuario de guardar a la tarea, solo quiero agregar esa pequeña funcionalidad extra que no está de más.

1
  • si al botón le añades la propiedad type="submit" debería de funcionar
    – Suso
    el 15 mar. a las 23:27

1 respuesta 1

0

En React, los inputs tienen la propiedad de onKeyDown, esta escucha el evento cuando precionas una tecla (cualquiera), debes de pasarle el evento leer la propiedad key, con un condicional te aseguras que sea 'Enter' y haces la funcionalidad que necesitas.

Mira un ejemplo.

const App = () => {

  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      //La logica que necesitas iría aquí
    }
  };

  return (
    <div>
      <input
        onKeyDown={handleKeyDown}
        id="message"
        name="message"
      />
    </div>
  );
};

export default App;

Tu Respuesta

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

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