Как установить состояние с помощью операторов распространения при использовании переменных для ключей? - PullRequest
Новая
       15

Как установить состояние с помощью операторов распространения при использовании переменных для ключей?

0 голосов
/ 24 марта 2019

У меня есть определенное состояние, например: 

    this.state = {
     receipts: {
       qwer12r: {color: 'red', size: '20'}
       qas123e: {color: 'green', size: '21'}
    }
   };

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

Но, используя formID, я хочу проникнуть в объект formID и обновить только одно из свойств.

Компоненты структурированы таким образом, что дочерние элементы - это формы, а родительский - создатель / дубликатор формы.

Это означает, что функции изменения должны быть переданы дочерним элементам, чтобы получить их formID и соответственно обновить правильное состояние, принадлежащее правильной форме.

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

у родителя Вот что я уже пробовал: 

handleChange(formNumber, value) {
    this.setState(prevState => ({
      receipts: {
        ...prevState.receipts,
        [formNumber]: {
          ...prevState.formNumber,
          color: value
        }
      }
    }));

и это: 

handleChange(formNumber, value) {
    this.setState(prevState => ({
      receipts: {
        ...prevState.receipts,
        [formNumber]: {
          ...`prevState.receipts.${formNumber}`,
          color: value
        }
      }
    }));

и это: 

handleChange(formNumber, value) {
    this.setState(prevState => ({
      receipts: {
        ...prevState.receipts,
        [formNumber]: {
          ...`prevState.${formNumber}`,
          color: value
        }
      }
    }));

у ребенка: Вот обработчик, прикрепленный к onChange раскрывающегося списка цветов в виде: 

onChange={value =>this.handleValueChange(this.props.formNumber, value)}

и вот определение этого метода: 

handleValueChange= (formId, value) => {
    this.props.handleformColorChange(formId, value);
  };

Если дочерняя форма вызывает метод handleChange, например handleChange ('qwer12r', 'blue'),

ожидаемый результат: 

this.state = {
receipts: {
   qwer12r: {color: 'blue', size: '20'}
   qas123e: {color: 'green', size: '21'}
}
};

Ответы [ 3 ]

0 голосов
/ 24 марта 2019

Это может быть полезно. 

handleChange(formId, value) = () => {
   this.setState({
       [formId] : {
          ...this.state[formId],
          color: value
       }
   )}
}
0 голосов
/ 24 марта 2019

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

class Parent extends Component {
  constructor() {
    super()
    this.state = { receipts: { firstForm: { color: "" } } }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(formNumber, value) {
    this.setState(prevState => ({
         receipts: {
          ...prevState.receipts,
          [formNumber]: {
            ...prevState[formNumber],
            color: value
          }
       }
    }));
  }

  render() {
    console.log(this.state)
    return (
      <Child formNumber="firstForm"
        handleformColorChange={this.handleChange}
        value={this.state.receipts.firstForm.color}></Child>
    )
  }
}
0 голосов
/ 24 марта 2019

Доступ к квитанциям в скобках 

handleChange(formNumber, value) {
    this.setState(prevState => ({
        receipts: {
            ...prevState.receipts,
            [formNumber]: {
                ...prevState.receipts[formNumber],
                color: value
            }
        }
    }));
...