El objeto evento contiene una propiedad llamada objetivo. Esta propiedad target tiene el ID de ese campo de entrada adjunto como una propiedad en sí misma. Si cada campo de entrada tiene un ID único, el objeto de evento puede ser manipulado para obtener directamente el par clave-valor que necesita ser almacenado dentro del estado utilizando e.target.id, donde e se refiere al objeto de evento y e.target.value es simplemente el valor extraído del campo de entrada. Para que esto funcione, las variables de estado necesitan tener el mismo nombre que el ID.
Aquí está cómo implementar esta solución.
Configuración
Asegúrate de que tienes Nodejs y npm instalados en tu máquina (al menos la versión 8 o superior), junto con un editor de código y un navegador web (preferiblemente Chrome o Firefox).
Crear un nuevo proyecto usando create-react-app:
1npx create-react-app onchange-handler-app
Shell
Estilos
Algunos estilos básicos de formas y botones dentro de index.css:
123456789101112131415161718192021222324252627282930313233343536373839body{margin:0;font-family: -sistema de manzanas, BlinkMacSystemFont,$0027Segoe UI$0027,$0027Roboto$0027,$0027Oxygen$0027,$0027Ubuntu$0027,$0027Cantarell$0027,$0027Fira Sans$0027,$0027Droid Sans$0027,$0027Helvetica Neue$0027, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}code{font-family: source-code-pro, Menlo, Monaco, Consolas,$0027Courier New$0027, monospace;}. forma-contenedor{posición: absoluta;arriba:100px;izquierda:280px;}entrada[tipo=texto], seleccionar{ancho:100%;acolchado:22px20px;margen:18px0;visualizar: bloque en línea;borde:1px sólido #ccc;borde-radio: 6px;}botón{ancho:100px;alto:40px;color-de-fondo:rgb(156,156,204);color:#ffffff;borde:2px sólido rgb(156,156,204);búsqueda-radio:20px;cursor: puntero;}css
Componente de la forma
Crear un componente de clase dentro del directorio raíz con el nombre Form.js. Este componente contiene un formulario con cuatro campos de entrada diferentes: Nombre, Correo electrónico, País y Ciudad de residencia. El estado del componente del formulario, por lo tanto, tiene cuatro pares clave-valor correspondientes a cada campo. Cada campo tiene un receptor de eventos onChange adjunto que toma el objeto del evento, toma los datos de ese campo y llama al método asincrónico setState() para actualizar el estado. Al final del formulario, el botón Submit , al hacer clic, renderiza los datos almacenados en el estado en el DOM.
123456789101112131415161718192021222324252627282930313233343536373839404142434445importReact,{Componente}de$0027reaccionar$0027;exportarclase predeterminadaFormextendsComponente{ estado={ nombre:$0027$0027, correo electrónico:$0027$0027, país:$0027$0027, ciudad:$0027$0027}manejarCambiar=(e)={esta.setEstado({[e. target.id]:e.target.value},()= >{console.log(this.state);})}handleSubmit=()=>{console.log(this.state)let details=document.querySelector($0027#details$0027); details.textContent=this.state.name+$0027 $0027+this.state.email+$0027 $0027+this.state.country+$0027 $0027+this.state.state. city;}render(){return(<divclassName="form-container"<formaction=""<inputtype="text "placeholder="name "onChange={this.handleChange}/ <inputtype="text "placeholder="email "onChange={this.handleChange}/><inputtype="text "placeholder="country "onChange={this. handleChange}/{this.handleChange}/;inputtype="text "placeholder="city "onChange={this.handleChange}/{this.form handleSubmit};Submit</button >divclassName="details"< <p>User Details:</p>span;</span;};/div;;}}}jsx
Se puede acceder a la propiedad de un objeto utilizando la notación de puntos o la notación de corchetes. Dado que cada campo de entrada contiene un ID único, [e.target.id] coincide con el nombre clave de la propiedad del estado. Por lo tanto, la variable de estado es actualizada por el manejador de onChange sin saber directamente qué campo de entrada se supone que debe actualizar qué variable de estado. Puede ver que console.log() en cada método verifica que el estado se actualiza dinámicamente cada vez que el usuario teclea en un campo de entrada.
Pruebas
El código de arriba generará una UI que se verá así:
Ejecute npm start para hacer girar un servidor de desarrollo local. Puedes ver la aplicación funcionando en localhost:3000 en tu navegador (create-react-app lo hace automáticamente por ti). Abre la consola de desarrollo y empieza a rellenar los campos del formulario. Los datos de cada campo se emiten en la consola de forma dinámica, y el estado se actualiza en tiempo real. Rellena todos los campos y haz clic en el botón Submit . Los datos del usuario se muestran al DOM a partir del estado del componente.
Limitación
El número de líneas de código es menor, setState() se llama una sola vez, y el código parece más limpio, por lo tanto es fácil de depurar. Sin embargo, todavía hay espacio para mejorar. Las llamadas a las funciones a los manejadores de eventos son directamente proporcionales al número de campos de entrada, y dado que cada campo de entrada está llamando a la misma función, es redundante llamar a handleChange varias veces y ocupar tanto espacio en la pila de llamadas de la función.