Question

我有一个表，该表根据api调用和选择下拉列表呈现数据。选中复选框name并将其值添加到名为selectedFields的数组对象

  checkbox = ({ name, isChecked }) => {
//handle check box of each fieldName
if (isChecked === true) {
  //checked conditional
  this.setState(
    { selectedFields: [...this.state.selectedFields, { name }] });
} else {
  this.setState({
      selectedFields: this.state.selectedFields.filter(f => f.name !== name)
    });
}

};

选中一个复选框后，数据结构最终看起来像这样：

  "selectedFields": [
    {
      "name": "author"
    }
   ]

用户还需要输入3个输入值（lengthType，size等），并在所选的同一对象内进行更新。

当前，我无法获取要更新为相应name对象的值。

我想要的结构是

  "selectedFields": [
    {
      "name": "author",
      "lengthType": "fixed",
      "size": "1"
    }
  ]

因此，在索引文件中，需要更改handleChange和onLengthTypeChange处理程序，以将这些更新后的值添加回[name_obj]，但是我不确定如何。

这里是有问题的codesandbox

Answer 1

尝试将您的Dropdown处理程序更改为此：

onLengthTypeChange = ({ currentTarget: { textContent } }, name) => {
  const { selectedFields } = this.state;
  if (selectedFields.some(elem => elem.name === name)) {
    this.setState({
      selectedFields: [
        ...selectedFields.map(elem =>
          elem.name !== name
            ? elem
            : {
                name,
                lengthType: textContent
              }
        )
      ]
    });
  }
};

您还需要检查复选框处理程序的select输入中是否已经有任何值，以便将它们和名称一起添加到状态中。但是我认为更好的解决方案是，如果未选中此复选框，则仅禁用行输入。

让我知道是否有帮助。

变更处理常式不会更新已新增物件中的值

1 个答案: