如果选择了组中的任何选项，则应使用 Ant 设计（OptGroup，选项）禁用其他组中的所有选项 - React.js

Question

我如何实现多个 select 行为如果我从一个部分开始 selected，另一个部分将从 selection 中禁用。我尝试了很多方法来做到这一点，但我在逻辑上遇到了问题如何实现它。

Image - How should it look

export default function App() {
  const [datas, setDatas] = React.useState(initialState);
  const [selectedItems, setSelectedItems] = React.useState([]);

  const onChange = option => {
    setSelectedItems(option);

    // code here
  };

  function tagRender(props) {
    const { value, closable, onClose } = props;

    return (
      <Tag
        color="blue"
        closable={closable}
        onClose={onClose}
        style={{ marginRight: 3 }}
      >
        {value}
      </Tag>
    );
  }

  return (
    <Select
      mode="multiple"
      value={selectedItems}
      tagRender={tagRender}
      style={{ width: "100%" }}
      onChange={onChange}
      menuItemSelectedIcon={null}
    >
      {datas.map(data => (
        <OptGroup label={data.groupName} key={data.groupName}>
          {data.options.map(option => (
            <Option value={option.value} key={option.value}>
              <Checkbox
                style={{ pointerEvents: "none" }}
                type="checkbox"
                checked={selectedItems.indexOf(option.value) !== -1}
              >
                {option.value}
              </Checkbox>
            </Option>
          ))}
        </OptGroup>
      ))}
    </Select>
  );
}

Answer 1

尝试在所选项目更改后将禁用的选项附加到数据。

这是完整代码

export default function App() {
  const [datas, setDatas] = React.useState(initialState);
  const [selectedItems, setSelectedItems] = React.useState([]);

  const onChange = option => {
    setSelectedItems(option);

    // code here
    const newData = datas.map((data) => {
      if (!data.options.map(each => each.value).includes(option[0])) {
        return {
          groupName: data.groupName,
          options: data.options.map(each => {
            return { value: each.value, disabled: true }
          })
        };
      }
      return data;
    })

    if (option.length > 0) {
      setDatas(newData);
    } else {
      setDatas(initialState);
    }
    // code here
  };

  function tagRender(props) {
    const { value, closable, onClose } = props;

    return (
      <Tag
        color="blue"
        closable={closable}
        onClose={onClose}
        style={{ marginRight: 3 }}
      >
        {value}
      </Tag>
    );
  }

  return (
    <Select
      mode="multiple"
      value={selectedItems}
      tagRender={tagRender}
      style={{ width: "100%" }}
      onChange={onChange}
      menuItemSelectedIcon={null}
    >
      {datas.map(data => (
        // added disabled for both option and checkbox
        <OptGroup label={data.groupName} key={data.groupName}>
          {data.options.map(option => (
            <Option value={option.value} key={option.value} disabled={option?.disabled ?? false}>
              <Checkbox
                style={{ pointerEvents: "none" }}
                type="checkbox"
                checked={selectedItems.indexOf(option.value) !== -1}
                disabled={option?.disabled ?? false}
              >
                {option.value}
              </Checkbox>
            </Option>
          ))}
        </OptGroup>
      ))}
    </Select>
  );
}

如果选择了组中的任何选项，则应使用 Ant 设计（OptGroup，选项）禁用其他组中的所有选项 - React.js

If any option from a Group is selected, then all options in other group should get disabled using Ant design (OptGroup, Option) - React.js

javascript

reactjs

antd