Question

我有一个下拉选择，其中包含一些选项，当选择了一个选项时，还应在复选框部分中选中与所选的相同的name。

我在codesandbox中模拟了快速复制。

我正在考虑在数据对象上保留选定值的思路：

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

然后在其上映射复选框值-我不确定这部分。并且以某种方式需要将updateSelectorField内部的状态更新为选定的值。

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

Answer 1

要实现所需的功能，只需将value组件上的CheckboxGroup道具从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属性，因为您不希望该属性反映您对复选框所做的更改，而是希望保留在用户选择的位置。

反应-通过下拉菜单选择相同选项的预选复选框

1 个答案: