如何基于选中的复选框来切换按钮className（反应）？

Question

当页面上的任何一个复选框被选中时，我想将按钮从“ btn-default”更改为“ btn-warning” ...

我已经设置了toggleActions的状态，并将其默认设置为false ...

在页面上选择任何选择框后，如何将状态切换为true ...

按钮：

<button
  className={`btn waves-effect waves-classic mr-2 ${
    component.state.toggleActions ? "btn-warning" : "btn-default"
  }`}
  type="button"
  id="dropdownMenuButton-contacts-actions"
  data-toggle="dropdown"
  aria-haspopup="true"
  aria-expanded="false"
>
  Actions
  <span className="icon md-chevron-down" aria-hidden="true" />
</button>

复选框：

<td class=" cell-30">
  <span class="checkbox-custom checkbox-primary checkbox-lg">
    <input
      type="checkbox"
      class="contacts-checkbox selectable-item"
      id="contactName501049"
    >
    <label for="contactName501049" />
  </span>
</td>