Estoy usando React con los componentes Textfield de Material UI. Estaba tratando de encontrar la mejor manera de establecer los estados del formulario con la menor redundancia. Como por ejemplo, tengo 8 campos de entrada diferentes. En lugar de tener un controlador separado para cada entrada, como por ejemplo handleFirstName, handleLastName, handleEmail, handleInfo, etc.
Entonces, para lograr esto, traté de crear un controlador handleChange que se ve a continuación:
handleChange = (e) => { this.setState({ [e.target.name]: e.target.value }); }Y en cada componente,
<TextField className={classes.formInput} name="firstName" onChange={e => this.handleChange(e.target.value)} required id="" type="text" InputLabelProps={{ shrink: true, }} error={!firstName} helperText="Name is required" label="First Name" variant="standard" /> <TextField className={classes.formInput} name="lastName" onChange={e => this.handleChange(e.target.value)} required id="" type="text" InputLabelProps={{ shrink: true, }} label="Last Name" variant="standard" />Y aquí está mi objeto de estado
constructor(props) { super(props); this.state = { firstName: '', lastName: '', ..., }; }Estos son solo dos de los campos de entrada, pero hay unos 6 campos más que tienen el mismo aspecto. ¿Alguna idea para combatir este nombre indefinido?
El problema es que no está pasando el objeto de evento completo. Estás pasando solo el valor. Esa es la razón por la que obtiene el nombre como indefinido.
Intente cambiar el evento onChange a continuación:
onChange={this.handleChange}
De esta manera obtendrá el objeto de evento completo en la variable e de la función.
Creo que necesita manejar múltiples cambios de campo de entrada en una sola función. Es factible. prueba esto
handleChange = (e)=>{ {name,value} = e.target; this.setState({ [name]=value; }); }finalmente, cuándo pasar el método onChange a los campos use:
onChange = {this.handleChange}