reactjs - 使用变量作为键时，如何使用扩展运算符设置状态？

Question

我有某种状态，例如：

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

这些值是从两种不同的形式收集的。因此，键对应于不同的表单 ID。表单有下拉列表，我从中成功返回了 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'}
}
};

Answer 1

您可以通过括号表示法检索属性，下面是相同的简单实现。

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>
    )
  }
}

Answer 2

访问带有括号符号的收据

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

Answer 3

这可能会有所帮助。

handleChange(formId, value) = () => {
   this.setState({
       [formId] : {
          ...this.state[formId],
          color: value
       }
   )}
}