Estoy usando React JS. Estoy configurando el estado, sin embargo, hay un problema en la parte value={} del campo de entrada.
Aquí está mi código:
import React from 'react'; class SomeClass extends React.Component{ constructor(props){ super(props); this.state = { passCode: { email: "Email", password: "Password" }, errorMessage: '' }; } handleChange = (event) =>{ console.log(`input detected`); let request = Object.assign({},this.state.passCode); request.email = event.target.value; request.password = event.target.value; this.setState({passCode: request}); } render() { return ( <form onSubmit={this.handleSubmit}> <label>Email Address</label> <input type="text" value={this.state.passCode.email} onChange={this.handleChange} placeholder="Enter Email Address" /> <label>Password</label> <input type="password" value={this.state.passCode.password} onChange={this.handleChange} placeholder="Enter One Time Password" /> <Button type="submit"> Sign In</Button> </form> ); } } export default SomeClass;Mi pregunta:
Tengo es para el atributo de valor de los campos de entrada, creo que setState no funciona correctamente:
En el objeto passCode del estado. Cuando escribo el correo electrónico, ambos campos se configuran con lo que escribí en el campo de correo electrónico. Cuando escribo la contraseña, ambos campos se configuran con lo que escribí en el campo de contraseña.
¿Cuál es la razón de tal problema?
setState funciona correctamente; su handleChange no lo es. Está configurando tanto el email como la password en el valor de la entrada, independientemente de en qué entrada se haya producido el cambio. En su lugar, desea actualizar solo la propiedad relevante. Para hacer eso, agregaría atributos de name a los elementos de input ( name="email" y name="password" ), luego:
handleChange = ({currentTarget: {name, value}}) =>{ console.log(`input detected`); this.setState(({passCode}) => { return {passCode: {...passCode, [name]: value}}; }); };Bits clave que hay:
change , manteniendo la otra sin cambios, utilizando el nombre de la entrada.setState (mejor práctica ya que estamos configurando el estado en función del estado existente).Su función handleChange es incorrecta. Debe actualizar así con el uso de name :
handleChange = (event) => { console.log(`input detected`); const { name, value } = event.target; this.setState({ passCode: { ...this.state.passCode, [name]: value } }); }; Y establezca el name en la input :
<input type="text" value={this.state.passCode.email} onChange={this.handleChange} placeholder="Enter Email Address" name="email" /> <input type="password" value={this.state.passCode.password} onChange={this.handleChange} placeholder="Enter One Time Password" name="password" />Los métodos que dieron son buenos, pero aun así sugiero que separes los métodos para cambiarlos, tal vez sea mucho mejor.