Реагировать на состояние обновления с помощью вложенного объекта

Question

У меня есть форма, и когда я отправляю ее, я хочу обновить состояние. Прямо сейчас работает только имя и фамилия. Как с помощью функции handleChange можно также обновить адрес, который является вложенным объектом? Или мне нужно написать другую функцию для этого? Спасибо за помощь

class Form extends Component {
  constructor(props){
    super(props);

    this.state = {
        name: '',
        surname: '',
        address: {
            street: '',
            city: '',
        },
    }
  }

  handleChange = e => {
    this.setState({ 
      [e.target.name]: e.target.value,   
    })
  }

  handleSubmit = e => {
    e.preventDefault();
  }

  render() {
    const {name, surname} = this.state;
    const { street, city} = this.state.address;

    return (
      <form onSubmit={this.handleSubmit}>
        <input type='text'
          value={name} 
          name='name'
          onChange={this.handleChange} />
        <input type='text'
          value={surname} 
          name='surname'
          onChange={this.handleChange} />
        <input type='text'
          value={street}
          name='street' 
          onChange={this.handleChange} />
        <input type='text'
          value={city} 
          name='city'
          onChange={this.handleChange} />
        <input type='submit' value='Submit' />
      </form>
    );
  }
}

Answer 1

Я знаю, что все вы столкнулись с подобной задачей, но весь смысл в том, чтобы переделать исходное состояние.React не ориентирован на работу с вложенными состояниями.

this.state = {
    name: '',
    surname: '',
    street: '',
    city: ''
}

Answer 2

Вам просто нужен доступ к улице и городу? Сначала просто деструктурируйте адрес следующим образом.

Изменить

const {name, surname} = this.state;
const { street, city} = this.state.address;

до

const {name, surname, address } = this.state;
const { street, city} = address;

Answer 3

Я бы порекомендовал вам написать отдельный обработчик изменений для address.Это сделает ваш код простым и легким для понимания, вместо добавления ненужной сложности к этому простому методу.

function handleAddressChange = e => {
    const {name, value} = event.target
    this.setState(({ address }) => {
        address: {
            ...address,
            [name]: value
        }
    })
}

Answer 4

У вас должен быть атрибут name в элементах формы, а затем проверьте значение этого имени до setState. Таким образом, метод render() выглядит следующим образом

render() {
  const {name, surname} = this.state;
  const { street, city} = this.state.address;

  return (
    <form onSubmit={this.handleSubmit}>
      <input type='text'
        name={name}
        value={name}
        onChange={this.handleChange} />
      <input type='text'
        name={surname}
        value={surname}
        onChange={this.handleChange} />
      <input type='text'
        name={street}
        value={street}
        onChange={this.handleChange} />
      <input type='text'
        name={city}
        value={city}
        onChange={this.handleChange} />
      <input type='submit' value='Submit' />
    </form>
  );
}

и handleChange()

handleChange = e => {
  const name = e.target.name;
  if (name === 'city' || name === 'street') {
    this.setState({
      address: {
        ...state.address,
        [name]: e.target.value
      }
    });
  } else {
    this.setState({
      [name]: e.target.value
    });
  }
};

... - это ES6 Spread Operator , это самый чистый способ обновить вложенное состояние в React.