0

Tenho um componente e o seguinte state:

this.state = {
    form : {
        name : '',
        username: '',
        email: '',
        phone: '',
        address: {
            street: '',
            suite: '',
            city: '',
            zipcode: ''
        }
    }
}

Nos campos do formulário, uso o seguinte método no onChange:

handleChange(e) {
    const {name, value} = e.target;
    let copyState = Object.assign({}, this.state);
    copyState.form[name] = value;
    this.setState(copyState);
}

Este é um exemplo de um campo do formulário funcional:

<input value={this.state.form.username} 
    onChange={this.handleChange} 
    name="username"
    type="text" 
    className="form-control" 
/>

Este não funciona:

<input value={this.state.form.address.street} 
   onChange={this.handleChange} 
   name="address.street"
   type="text"
   className="form-control" 
/>

O método handleChange funciona perfeitamente nos items: name, username, email e phone, PORÉM, nos atributos pertencentes a address não.

Como resolver isso?

Desde já agradeço. :)

1 Resposta 1

0

Quando executa a linha

copyState.form[name] = value;

o que acontece é

copyState.form['address.street'] = 'value of input';

e não

copyState.form['address']['street'] = 'value of input';

Você pode usar um if e resolve, mas se quer algo que seja mais dinâmico, que possa reutilizar em outros locais sem alterar e que possa acessar N filhos do objeto:

const {name, value} = e.target;

let copyState = Object.assign({}, this.state);

props = name.split('.');

lastProp = props.pop();

tmp = copyState.form;

for (prop of props) tmp = tmp[prop];

tmp[lastProp] = value;

this.setState(copyState);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .