Este método:
handleInput(e){
this.setState({
...this.state,
[e.target.name]: e.target.value
})
}
Lo que hace usar el atributo name
del control como key del estado. En tu caso, tienes:
<input
className="form-control input-lg"
type="text"
name="apellido"
onChange={this.handleInput}
/>
Por ende, en tu handler, en tiempo de ejecución se interpretará:
this.setState({ apellido: 'el valor que tenga el input' })
Lo que debes hacer es ponerle en el atributo name
, todos los niveles a los cuales debes acceder:
<input
className="form-control input-lg"
type="text"
name="persona.apellido" // fíjate aquí
onChange={this.handleInput}
/>
Update
Respecto a tu comentario, no es posible que siga en blanco. Aparece en blanco por dos razones:
- Porque estás imprimiendo el estado inmediatamente después de invocar a
setState
.
- Porque estás sobreescribiendo el estado en lugar de actualizarlo.
Para actualizar el estado, es importante mantener los cambios anteriores. ¿Cómo haces esto? Simple, añadiendo al nuevo estado los cambios que se han realizado:
handleInput(e){
this.setState({
...this.state, // aquí, añadimos al nuevo estado los cambios actuales
[e.target.name]: e.target.value
})
}
Además:
El método setState
es un método asíncrono que recibe un callback como segundo parámetro, el cual se ejecutará inmediatamente después que React ha actualizado el estado.
Al ser un método asíncrono, ambas líneas se ejecutarán al mismo tiempo.
// ambas se ejecutan al mismo tiempo, por lo que cuando se
// ejecuta "console.log" el estado AÚN NO HA SIDO actualizado.
handleInput(e){
this.setState({[e.target.name]: e.target.value })
}
console.log(this.state)
Deberías imprimir el estado dentro de un callback:
// ambas se ejecutan al mismo tiempo, por lo que cuando se
// ejecuta "console.log" el estado AÚN NO HA SIDO actualizado.
handleInput(e){
this.setState({
...this.state,
[e.target.name]: e.target.value
}, () => console.log(this.state))
}
Actualizaciones en estados anidados
No te recomiendo tener un estado anidado por cuestiones de rendimiento. Cuando tienes un estado anidado sean los niveles que sean, si se actualiza un campo de un estado interno, esto significa que todo el estado será actualizado ya que el estado no es mutable.
Es mejor, en estos casos, usar el hook useState
en un componente como función.
Ejemplo
const { useState } = React
const { render } = ReactDOM
const NuevoUsuario = function(props) {
const [user, setUser] = useState('')
const [password, setPassword] = useState('')
const [name, setName] = useState('')
const [lastname, setLastname] = useState('')
const [formValid, setFormValid] = useState(false)
const handleInput = function (e) {
const setter = getSetter(e.target.name)
setter(e.target.value)
const valid = [user, password, name, lastname].every(v => v.length > 0)
setFormValid(valid)
}
const handleSubmit = function(e) {
e.preventDefault()
const payload = {
user,
password,
person: {
name,
lastname
}
}
// enviar al backend o algo
console.log(JSON.stringify(payload, null, 4))
}
const getSetter = function (controlName) {
switch (controlName) {
case 'user': return setUser
case 'password': return setPassword
case 'name': return setName
case 'lastname': return setLastname
default: return () => {}
}
}
// equivalente al "render"
return (
<form onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="exampleInput">Usuario</label>
<input
className="form-control input-lg"
type="text"
name="user"
onChange={handleInput}
/>
</div>
<div className="form-group">
<label htmlFor="exampleInput">Contraseña</label>
<input
className="form-control input-lg"
type="password"
name="password"
onChange={handleInput}
/>
</div>
<div className="form-group">
<label htmlFor="exampleInput">Nombre</label>
<input
className="form-control input-lg"
type="text"
name="name"
onChange={handleInput}
/>
</div>
<div className="form-group">
<label htmlFor="exampleInput">Apellido</label>
<input
className="form-control input-lg"
type="text"
name="lastname"
onChange={handleInput}
/>
</div>
<div className="form-group wide pull-right">
<button type="submit" disabled={!formValid}>Registrar Usuario</button>
</div>
</form>
)
}
render(
<NuevoUsuario />,
document.getElementById('root'
))
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
form {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
width: 350px;
margin: 20px auto;
}
.form-group {
}
.form-group label,
.form-group input {
display: block;
width: 100%;
}
.form-group.wide {
grid-column: 1/3;
padding: 5px 0;
}
.form-group.pull-right {
text-align: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>