antd 在单选时禁用所有其他复选框

Question

我尝试使用 antd Checkboxes 进行单选，但是没有关于如何在单选时禁用其他复选框的文档。有一个“已禁用”布尔选项，除了选中之外的所有复选框都应该为真。

react.jsx可以吗？

const [checkList, setCheckList] = useState(array)
const [disable, setDisable] = useState(false)

{checkList.map((item) => (
<CheckBox onChange=(e => e.target.checked ? setDisable(true) : setDisable(false)) disabled={disable}>{item}</CheckBox>))

那是我所做的，但它禁用了所有复选框。

UPD：这是有效的选项，但看起来不太好。有什么办法可以做得更好吗？

const [one, setOne] = useState(false);
  const [two, setTwo] = useState(false);
  const [three, setThree] = useState(false);

<Checkbox
                    onChange={e => {
                      if (e.target.checked) {
                        setTwo(true);
                        setThree(true);
                      } else {
                        setTwo(false);
                        setThree(false);
                      }
                    }}
                    disabled={one}
                  >
                    1
                  </Checkbox>
                  <Checkbox
                    className="ml-0"
                    onChange={e => {
                      if (e.target.checked) {
                        setOne(true);
                        setThree(true);
                      } else {
                        setOne(false);
                        setThree(false);
                      }
                    }}
                    disabled={two}
                  >
                    2
                  </Checkbox>
                  <Checkbox
                    className="ml-0"
                    onChange={e => {
                      if (e.target.checked) {
                        setOne(true);
                        setTwo(true);
                      } else {
                        setOne(false);
                        setTwo(false);
                      }
                    }}
                    disabled={three}
                  >
                    3
                  </Checkbox>

Answer 1

import { Checkbox } from 'antd';
import { useState } from 'react';

export default function App() {
    const [checkList, setCheckList] = useState(['A', 'B', 'C', 'D']);
    const [isSelected, setIsSelected] = useState();

    const onChange = (e) => {
        if (e.target.checked) {
            !isSelected && setIsSelected(e.target.name);
        } else {
            setIsSelected(null);
        }
    };

    return checkList.map((item) => (
        <Checkbox disabled={isSelected ? isSelected !== item : false} name={item} key={item} onChange={onChange}>
            {item}
        </Checkbox>
    ));
}

您可以创建一个状态并在该状态下设置复选框键。我使用 name 属性并为每个复选框分配项目（假设 checkList 状态具有唯一元素或键）从每个复选框的 onChange 事件中获取密钥，然后我从 e.target + 中获取 name 的值来自 e.target.checked 的复选框值。我检查是 isSelected state is not null 然后存储密钥。我在每个复选框中检查禁用属性，我检查是否有任何键处于 isSelected 状态并且该键与复选框键不同，它将被禁用，否则它只会被选中复选框。

antd 在单选时禁用所有其他复选框

antd disable all other Checkboxes when single selected

checkbox

reactjs

antd