javascript - React - 从下拉列表中选择相同选项的预选复选框

Question

我有一个呈现几个选项的下拉选择，当选择其中一个选项时，还应在复选框部分选中所选择的相同 name。

我在 codesandbox 中模拟了一个快速复制品.

我在想一些关于在数据对象上保存选定值的事情:

this.state = {
  //other state values
  selectedName: true
};

然后在其上映射复选框值——我不确定这部分。而且 updateSelectorField 中的状态需要用选定的值更新。

updateSelectorField = e => {
    this.setState({ selectorField: e.target.value });
  };

Answer 1

要实现您想要的效果，您只需将 CheckboxGroup 组件上的 value 属性从 this.state.fieldNames 更改为 this.state.selectorField.

像这样:

<CheckboxGroup
  checkboxDepth={5}
  name="fieldNames"
  value={this.state.selectorField}
  onChange={this.fieldNamesChanged}
  required
>

然后还更改 fieldNamesChanged 上的状态突变，以便 selectorField 更新为 newFieldNames 的新值。

最后，将您的方法更改为:

updateSelectorField = ({target}) => {
  if (!this.state.selectorField.includes(target.value)) {
    this.setState(prevState => ({selectorField: [...prevState.selectorField, target.value]}));
  }
};

我还会从您的选择中删除 value 属性，因为您不希望它反射(reflect)您对复选框所做的更改，而是保留在用户选择的任何位置。