如何在React JS中使用按钮作为蚂蚁设计中的复选框

Question

我已经用react JS在ant-design中创建了一个Checkbox组。现在，我要使用“按钮”，而不是那里的复选框。每个值一键。

这是我的代码。

<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

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

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

Answer 2

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