¿Y si añadimos otra entrada a la mezcla? En lugar de sólo un campo de nombre, añadimos un campo de apellido como segundo campo de entrada de texto:
1234567891011121314151617181920212223242526272829importReactfrom "react";functionForm(){const[state, setState]=React.useState({nombre:"", apellido:""})return(<form><label>Nombre <input type="text" name="firstName" value={state. firstName} onChange={handleChange}/{state.lastName} onChange={handleChange}/ </label>};label>Apellido <input type="text" name="lastName" value={state.lastName} onChange={handleChange}/{ </label>};}javascript
Hay un par de cambios significativos que se han hecho, además del nuevo campo de entrada. Se ha añadido una nueva cadena de apellidos al estado para almacenar los datos de esta entrada, y cada uno de los elementos de entrada tiene un nuevo nombre prop. Estos puntales de nombre aparecerán en el DOM como atributos de nombre en los elementos HTML de entrada. Los consumiremos en un ajuste al código del manejador:
1234567functionhandleChange(evt){const value = evt.target.value;setState({...state,[evt.target.name]: valor });}javascript
Además de obtener el valor del evento objetivo, obtenemos el nombre de ese objetivo también. Este es el punto esencial para manejar múltiples campos de entrada con un solo manejador. Canalizamos todos los cambios a través de ese único manejador pero luego distinguimos cuál entrada el cambio viene de usar el nombre.
Este ejemplo utiliza [evt.target.name], con el nombre entre corchetes, para crear un nombre de clave dinámica en el objeto. Debido a que los apuntalamientos de nombre de formulario coinciden con las claves de propiedad de estado, la entrada firstName establecerá el estado firstName y la entrada lastName establecerá por separado el estado lastName.
También hay que tener en cuenta que, debido a que estamos usando un objeto de un solo estado que contiene múltiples propiedades, estamos extendiendo (…estado) el estado existente de nuevo en el nuevo valor de estado, fusionándolo manualmente, al llamar a setState. Esto es necesario cuando se utiliza React.useState en la solución.