按钮内的antd复选框

Question

这里是react初学者，这里我有antd复选框，我想把这个复选框改成一个按钮，但仍然有复选框功能：这里是我的复选框：

null

  import { Checkbox } from "antd";

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

null

这就是我试着做的，我试着给checkbox不透明度为零来隐藏它，然后把checkbox放在一个按钮里面，以改变它的外观为按钮，并且有checkbox的功能，但是问题是，这个新按钮是工作的，如果你点击按钮的左侧，但右侧不工作，有什么解决方案吗？：

null

  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>

null

Answer 1

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

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

假设状态变量为checkedlist、indeterminal和checkall，句柄更改如下所示：

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