3

hola gente como estan vendo aqui a pedirles ayuda estoy con react js, tengo estos estados que son solicitados para enviarlos por post para generar un usuario.-

class NuevoUsuario extends Component{
    constructor(props){
        super(props)
        this.state = {
            usuario: '',
            password: '',
            persona: {
                apellido:'',
                apellidoCasada:'',
                nombre:'',
                dni:'',
                telefono:'',
                celular:'',
                email:'',
                ubicacion: {
                    direccion:'',
                    ciudad:'',
                    provincia:'',
                    codigoPostal:'',
                    paisId: 0,
                }

            }
            
        }
        this.handleInput = this.handleInput.bind(this);
        
    }

    handleInput(e){
        this.setState({[e.target.name]: e.target.value })
        console.log(this.state);
    }

ahora lo que quiero es que desde

 <div className="form-group">
                  <label htmlFor="exampleInput">Apellido</label>
                    <input
                      className="form-control input-lg"
                      type="text"
                      name="apellido"                                     
                      onChange={this.handleInput}                      
                    />
                  </div>

al hacer eso se me asigna el usuario y contraseña, pero el apellido y todos los demas no se asigna a persona.apellido o persona.nombre directamente se me agrega un estado nuevo asi y quedan vacios los de persona {} introducir la descripción de la imagen aquí

lo que quiero es que se guarde en persona.Apellido si pueden darme una mano muchas gracias muchachos saludos cualquier cosa estoy online

3 respuestas 3

5

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:

  1. Porque estás imprimiendo el estado inmediatamente después de invocar a setState.
  2. 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>

2
  • hola,gracias por tu ayuda, sabes que ya intente de esa manera y directamente se agrega el persona.apellido, y sigue dejando vacio el campo como en la ultima imagen que mande. Commented el 18 jun. 2019 a las 1:07
  • @MatiasJuarez mira mi actualización.
    – gugadev
    Commented el 19 jun. 2019 a las 16:10
3

La respuesta que te dio @gugadev es muy acertada, y en realidad el error es ese y es lo que debes tener en cuenta, pero ten presente que si quieres dinamizar este comportamiento debes ayudarte de algún método, una forma muy fácil aplicada a lo que necesitas puede ser esta:

handleInput(e) {
  const [ targetProperty, targetNested ] = e.target.name.split('.');

  if (targetNested) {
    this.setState({
      [targetProperty]: { ...this.state[targetProperty], [targetNested]: e.target.value }
    });
  } else {
    this.setState({[e.target.name]: e.target.value });
  }
}

Lo que estoy haciendo básicamente es cortar el nombre del input que debería ser algo como 'persona.nombre' o 'persona.email' y luego reasigno su respectivo valor en el state.

Explicación Los objetos de tipo string tienen un método llamado .split() que permite hacer un corte del string dado un separador y devuelve las partes cortadas en una lista o array, es decir, para tu caso:

const string = e.target.name;  // es decir, string será igual a 'persona.nombre'

console.log(string.split('.'));
// esto mostrará en consola "['persona', 'nombre']"

Lo que hice luego con la línea de const [ targetProperty, targetNested ] = e.target.name.split('.') se conoce como Asignación por desestructuración y básicamente te permite asignar variables de acuerdo al tipo de dato que manejes, es decir podría hacer cosas como esta:

// Si es un Objeto
const object = { property: 'foo' };
// aquí desestructuramos
const { property } = object;
console.log(property);  // Esto mostrará en consola "foo"

// Si es un Array
const array = ['hola', 'mundo', 'desestructurado'];
// aquí desestructuramos
const [ variable1, ...variable2 ] = array;
console.log(variable1);  // Esto mostrará en consola "hola"
console.log(variable2);  // Esto mostrará en consola "['mundo', 'desestructurado']"

Te hago una observación, hacer el console.log del state luego de modificarlo puede no tener el resultado que deseas, ya que no se ejecuta de manera sincrónica como estamos acostumbrados. Lo ideal sería hacer esta llamada en el callback, así:

this.setState(..., () => {
  // Este es el callback
  console.log(this.state);
});

Espero que esta vez pueda funcionar adecuadamente y puedas resolver tu problema, cualquier pregunta comenta.

BONUS

Para poder guardar a un tercer nivel, podrías hacer algo como esto:

getNewStateFromEvent(e, state) {
  const [ property, ...nested ] = e.target.name.split('.');

  if (nested.length) {
    const mockedEvent = { target: { name: nested.join('.'), value: e.target.value } }
    return {
      ...state,
      [property]: { ...state[property], ...this.getNewStateFromEvent(mockedEvent, state[property]) }
    }
  }
  return { ...state, [property]: e.target.value }
}

handleInput(e) {
  this.setState(this.getNewStateFromEvent(e, this.state));
}
6
  • bien muchas gracias por tu ayuda con respecto a targetProperty aque haces referencia? que deberia poner?, y con targetNested ? al agregar tal cual el codigo que me dijiste vos directamente se asigna a targetNested: (a lo que dije el imput) y no se asiga a persona.apellido Commented el 18 jun. 2019 a las 17:36
  • Hice una edición en el código para que te pueda funcionar adecuadamente, también añadí una explicación @MatiasJuarez. También te hago una aclaración, esa función que te escribí solo es útil para guardar datos a un segundo nivel de profundidad en un objeto, es decir, es probable que para guardar la ubicación no te funcione, pero puedes partir de ahí para diseñar una función un poco más compleja y abarcar más de 2 niveles de profundidad Commented el 18 jun. 2019 a las 18:51
  • Edité y añadí un bonus con el código para que puedas actualizar hasta x nivel de profundidad en tu objeto Commented el 18 jun. 2019 a las 19:25
  • Hacer un nested update es bastante ineficiente en términos de performance, ya que si quieres actualizar solo un campo en el estado de tercer nivel, forzarás a que se re-rendericen todos los controles ya que el estado será actualizado en su totalidad. Para esto, es mejor usar el hook useState para cada campo.
    – gugadev
    Commented el 19 jun. 2019 a las 15:58
  • Excelente aporte @gugadev es un gran aporte, sin embargo me limité a responder y una forma de solucionar la pregunta del OP Commented el 19 jun. 2019 a las 16:04
0

hola gracias a todos por ayudar, consegui la solucion de esta manera cada funcion es utilizada para asignar a cada nivel, saludos

   handleInput(e) {
    this.setState({[e.target.name]: e.target.value });
    console.log(this.state);
}

handleInputPersona(e){
    this.setState({...this.state, persona: {...this.state.persona, [e.target.name]: e.target.value}});
    console.log(this.state);

}

handleInputUbicacion(e){
  this.setState({...this.state, persona: {...this.state.persona, ubicacion: {...this.state.persona.ubicacion, [e.target.name]: e.target.value}}});
  console.log(this.state);
}
4
  • No hagas esto. No es una solución eficiente. Mira la última actualización que hice.
    – gugadev
    Commented el 20 jun. 2019 a las 12:20
  • @gugadev No quiero armar un debate, pero si eso le ayudó a resolver la pregunta al op, no hay problema en que use su respuesta u otra, el no preguntó por optimización, preguntó por una respuesta a su problema. Empecemos porque hacer un this.setState({ ...this.state }) es lo menos optimo y redudante, cuando react lo hace por si solo, y por mucho mejor que sea usar stateless functions con useState, esta solución no deja de ser efectiva ni optima, recuerda que antes de useState, esta era la única forma de hacerlo Commented el 20 jun. 2019 a las 13:22
  • @GermanAlzate Tenemos puntos de vista distintos al respecto. Cuando doy cursos internos, le exijo al alumno que sepa diferenciar de una solución "que funciona" de una "eficaz" (no solo eficiente). Empezar desde el inicio con este tipo de malas prácticas desencadena en varias más y problemas que en teoría serían tan sencillos de solucionar como entender el por qué.
    – gugadev
    Commented el 20 jun. 2019 a las 17:25
  • Pero sí. Si le sirve y le es suficiente con eso, adelante. Mi intención no es obligar, es hacer que los OP entiendan por qué sucede y por qué deberían evitar ciertas prácticas y escenarios. Un saludo.
    – gugadev
    Commented el 20 jun. 2019 a las 17:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.