按钮内的 antd 复选框

Question

在这里反应初学者，这里我有 antd 复选框，我想将此复选框更改为按钮但仍然具有复选框功能：这是我的复选框：

  import { Checkbox } from "antd";

 <div className="modal-body d-flex flex-column">
                  <Checkbox
                    indeterminate={indeterminate}
                    onChange={onCheckAllChange}
                    checked={checkAll}
                  >
                    Select All{" "}
                  </Checkbox>
                </div>

这就是我试图做的，我试图将不透明度为零给复选框以隐藏它，然后将复选框放在按钮内，以便将其外观更改为按钮并具有复选框功能，但问题是，这个新的如果您单击按钮的左侧但右侧不起作用，则按钮有效，有什么解决方案吗？ ：

  import { Checkbox } from "antd";

 <div className="modal-body d-flex flex-column">
                  <button>
                    <Checkbox
                      style={{ opacity: "0" }}
                      indeterminate={indeterminate}
                      onChange={onCheckAllChange}
                      checked={checkAll}
                    >
                      Select All{" "}
                    </Checkbox>
                    Select All
                  </button>
                </div>

Answer 1

如果您希望按钮与复选框完全相同，只需将onCheckAllChange 传递给按钮onClick。

<div className="modal-body d-flex flex-column">
 <button onClick={onCheckAllChange}>
   Select All
 </button>
</div>

假设您的状态变量为 checkedList、indeterminate 和 checkAll：

const onCheckAllChange = (e: any) => {
 setCheckedList(!checkedList.length ? allColumnKeys : []);
 setIndeterminate(false); 
 setCheckAll(!checkAll);
};