autocomplete - MUI AutoComplete：当有两个“全选”选项时，如何使“取消选择”工作？

Question

我的代码在这里：https ://codesandbox.io/s/misty-currying-06ee9?file=/src/BusinessUnit/BusinessUnit.tsx

我select all在下拉列表中有两个选项。一种是选择所有机构，另一种是选择所有内部业务单元。

当我选择All internal和/或All agencies时，它的相关复选框被正确选择（例如 Penang Branch、Loyal Ecohill 等）。

renderOption={(option, state) => {
        let selectBUIndex = selectedBus.findIndex(
          (bu) => bu.name.toLowerCase() === "all internal"
        );
        if (selectBUIndex > -1) {
          if (option.category === "Internal") {
            state.selected = true;
          }
        }
        selectBUIndex = selectedBus.findIndex(
          (film) => film.name.toLowerCase() === "all agencies"
        );
        if (selectBUIndex > -1) {
          if (option.category === "Agency") {
            state.selected = true;
          }
        }
        return (
          <>
            <Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              style={{ marginRight: 8 }}
              checked={state.selected}
            />
            {option.name}
          </>
        );
      }}

当我单击Penang Branch复选框时会出现问题。

预计会发生什么？

• Penang Branch&All internal复选框未选中
• All internal从文本字段中删除芯片

实际发生了什么？

• 复选框Penang Branch并且All internal未被取消选中
• 芯片Penang Branch被添加到文本字段
• 芯片All internal未从文本字段中移除

过去几天我一直在谷歌搜索，怀疑我需要使用onChangeandrenderOption函数。我正在寻求一些指导来开始这件事。非常感谢。

标签： autocompletematerial-ui