reactjs - 材质 UI 多选复选框删除所选项目

Question

我有 2 个带有复选框的材质 ui 多选 fomrcontrol。这些是从 json 文件绑定的。一个用于列出州，另一个用于列出选定州的地区。选择工作正常，但我在取消选中复选框时遇到问题。

问题是，例如，当我选择州 GOA 和卡纳塔克邦时，这些州的相应地区将显示在 District formControl 中。我可以选择我选择的地区，说我选择了“北果阿”。如果我在状态下拉列表中取消选中“GOA”，我想清除我在“地区”下拉列表中选择的所有地区（即“北 GOA”需要删除）。

请帮我找到所需的输出
沙盒链接

标签： reactjs

Answer 1

每当您取消选中一个选定的州时，您都需要过滤这些地区，并删除那些属于未选中状态的地区：

  isDistrictInSelectedState = (district, statesSelected) => {
    return statesSelected.find(selectedState => {
      const districtsInState = StateDistrict.states.find(state => state.state === selectedState).districts;

      return districtsInState.find(districtInState => districtInState === district);

    })
  }

  handleChangeState = event => {
    // console.log(event.target.value)
    this.setState({
      sp_StatesCovered: event.target.value,
      sp_DistrictsCovered: this.state.sp_DistrictsCovered.filter(district => {
        return this.isDistrictInSelectedState(district, event.target.value);
      })
    });
  };