如何在 ant design 中使用 React js 将按钮用作复选框

Question

我在 ant-design 中使用 React JS 创建了一个复选框组。现在，我想使用按钮，而不是那里的复选框。每个值一个按钮。

这是我的代码。

<Checkbox.Group>
   <ul className="ul-custom">
   {this.props.symptomsForCheckbox.map((symptom) => {
       return (
          <li>
              <Checkbox value={symptom.id}>
                  symptom.nameEnglish
              </Checkbox>
          </li>
       );
    })}
    </ul>
</Checkbox.Group>

这里看起来像

我想要的是添加按钮，而不是复选框。下图显示了这一点。

我使用的代码是，

<Checkbox.Group>
   <ul className="ul-custom">
   {this.props.symptomsForCheckbox.map((symptom) => {
       return (
          <li>
              <Button value={symptom.id}>
                  symptom.nameEnglish
              </Button>
          </li>
       );
    })}
    </ul>
</Checkbox.Group>

但这不能用作复选框。有解决这个问题的想法吗？

提前致谢

Answer 1

这是我的创作。

您可以仅勾选一项或取消勾选全部。

我提供了简单的 CSS，看起来像

Radio.Button

。

https://stackblitz.com/edit/react-bsyhkm?file=index.js

我根据需要创建了具有垂直和宽度选项的新版本。

https://stackblitz.com/edit/react-bsyhkm-n7umzv?file=styled.js

Answer 2

不确定您是否仍在搜索，但我遇到了同样的问题，并在沙箱上找到了一个非常好的示例这里。

它实际上并没有使用任何 antd 库，但我认为它看起来非常相似，并且稍微调整一下以使其与 UI 的其余部分保持一致应该非常简单。

Answer 3

您可以使用

CheckableTags

而不是

checkBox

来获得此行为。 检查这个例子

Answer 4

你解决了吗？这是我的代码，但无法正常工作

<Checkbox.Group
                  value={checkedValues}
                  onChange={(values) => onChange(index, values)}
                >
                  {permissions.map((option: any, indexOther: any) => (
                    <Tooltip
                      placement="topLeft"
                      title="ini adalah adalah"
                      color={"gold"}
                      key={indexOther}
                    >
                      <Checkbox
                        key={`${indexOther}`}
                        value={option.value}
                        className="z-10"
                      >
                        <Button
                          type="dashed"
                          className="z-0"
                          onClick={() => onChange(index, option.value)} // not properly on unchecked for checked value and also replace all index value , should only change on onChange like checkgroup function
                        >
                          {option.label}
                        </Button>
                      </Checkbox>
                    </Tooltip>
                  ))}
                </Checkbox.Group>

这里功能

const onChange = (index: number, list: CheckboxValueType[]) => {
    setCheckedLists((prevLists) => {
      const newLists = [...prevLists];
      newLists[index] = list;
      return newLists;
    });
  };

  const onCheckAllChange = (
    index: number,
    checkedValues: CheckboxValueType[],
  ) => {
    const allPermissions = data[index].permission.map(
      (perm: any) => perm.value,
    );
    onChange(
      index,
      checkedValues.length === allPermissions.length ? [] : allPermissions,
    );
  };

Answer 5

也许你可以尝试， 在按钮单击事件上更改状态（state = !initialstate）（即反转初始状态），将初始状态设置为 false。然后根据按钮的状态设置复选框的值。