es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • React onChange: ¿Puedo hacer un handleChange para muchos eventos onChange y también pasar una clave de objeto como parámetro?

React onChange: ¿Puedo hacer un handleChange para muchos eventos onChange y también pasar una clave de objeto como parámetro?

14 Jul, 2023 Programación 
SOLUCIÓN


const onChangeHandler = (e, name) => {
  setFormData((c) => ({
    ...c,
    [name]: e.target.value,
  }));
};

onChange={(e) => onChangeHandler(e, "firstName")}



ANTES


Tengo esta función dentro de algunos inputs. Hay alrededor de 15 inputs. Me preguntaba si podría envolverlos todos en una función y manejarlos juntos. El onChange handler de mi input individual es el siguiente:


onChange={({ target }) =>
  setFormData((c) => ({
    ...c,
    driversLicense: target.value,
  }))
}



setFormData se pasa desde otro componente como props. Toma el valor anterior (c) y agrega nuestro valor actual. Me gustaría tener una función para establecer de forma dinámica la clave y el objetivo. Algo así, pero ni siquiera puedo alcanzar el nombre. Dice que no se utiliza. ¿Alguna idea?


const onChangeHandler = (e, name) => {
  setFormData((c) => ({
    ...c,
    name: e.target.value,
  }));
};
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    NUEVO

    Para manejar múltiples entradas juntas, puedes crear una función genérica onChangeHandler que acepte tanto el nombre del campo de entrada como el evento como argumentos.

    Aquí tienes un ejemplo que utiliza la sintaxis de propagación para actualizar el estado con el nuevo par clave-valor:

    const onChangeHandler = (nombre, evento) => {
  const valor = evento.target.value;
  setFormData(prevState => ({ ...prevState, [nombre]: valor }));
};

    Y puedes llamar a esta función para cada entrada pasando su nombre y el objeto evento como argumentos:

    <input name="firstName" onchange="{(e)" ==""> onChangeHandler("firstName", e)} />
<input name="lastName" onchange="{(e)" ==""> onChangeHandler("lastName", e)} />
<input name="driversLicense" onchange="{(e)" ==""> onChangeHandler("driversLicense", e)} />

    Ahora, cada entrada llamará a la misma función con su propio nombre y objeto evento, y el estado se actualizará en consecuencia.

Comments are closed.