Динамически генерирующие свойства в состоянии компонента реакции

Question

У меня очень большая форма, я хотел бы иметь состояние, которое сохраняет все входные данные пользователя в разных атрибутах, названных в честь формы.

Так что давайте предположим, что у меня есть форма с именем, возрастом и электронной почтой. Я хочу, чтобы все это было сохранено в состоянии, называемом значением. Поэтому, как только форма будет заполнена, я бы получил this.state.value[name], this.state.value[age] и this.state.value[email].

Однако это не сработает, я получаю сообщение об ошибке при попытке сохранить входные данные формы в этом отношении.

Вот код для handleChange():

handleChange(e) { 
    //this.setState({value[e.target.name]: e.target.value}); //does not work 
    this.setState({[e.target.name]: e.target.value}); //works! 
} 

Так как я мог бы хранить значения в из форм под государственным атрибутом?

Спасибо!

Answer 1

Что делать, если вы делаете это так:

const value = Object.assign({}, this.state.value) 
value[e.target.name] = e.target.value 
this.setState({ value }) 

Answer 2

value[e.target.name] не является допустимым ключом. Вы пытаетесь выполнить обновление состояния value, для которого я бы рекомендовал что-то вроде immutability-helper.

В этом случае ваше обновление будет выглядеть следующим образом:

this.setState({value: update(this.state.value, {[e.target.name]: {$set: e.target.value})})

Обратите внимание, что использование Object.assign, чтобы создать копию, как писал в другой ответ (+1) будет достичь того же, и вполне разумно в этом случае. Однако помощник по неизменности является полезным инструментом для более сложных обновлений.

Answer 3

Во-первых, я хотел бы указать, что value не определен в этом методе, поэтому может возникнуть ошибка (вы никогда не указали точную ошибку).

Обычно вы сохраняете значения по мере их обновления.

<input onChange={ e => this.setState({name: e.target.value}) />

Затем, когда форма была отправлена, вы бы иметь доступ ко всем значениям в государственном объекте.