Как использовать кнопки как флажки в дизайне муравьев с реакции js

Question

Я создал группу Checkbox в ant-design с реакцией 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

Может быть, вы можете попробовать, при событии нажатия кнопки изменить состояние (state =! Initialstate) (ie. Reverse initialstate), установить initialstate в false. а затем установите значения флажка в зависимости от состояния кнопки.