Question

如何使bootstrap复选框的行为类似于react中的单选按钮？我在表中动态加载行，并且每行都包含接受和拒绝复选框，我希望这些复选框的行为类似于单选按钮。我无法使用单选按钮，因此需要一种方法使复选框的行为类似于单选按钮。

                    <div className="custom-control custom-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        id={page + item.RowKey + "Accept"}
                        name={page + item.RowKey + "Accept"}/>

                      <label
                        className="custom-control-label"
                        htmlFor={page + item.RowKey + "Accept"}>

                        Accept
                      </label>
                   </div>
                   <div className="custom-control custom-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        id={page + item.RowKey + "Reject"} />
                      <label
                        className="custom-control-label"
                        htmlFor={page + item.RowKey + "Reject"}>

                        Reject
                      </label>
                   </div>

Answer 1

您可以将ref与复选框一起使用，并将onClick与复选框一起使用，通过使用ref您可以取消选中该复选框。

以下是有关参考文献的一些文档：https://reactjs.org/docs/refs-and-the-dom.html

Answer 2

您可以使用状态来操纵它。喜欢：

下面的链接有完整的解释

Change checked attribute of controlled checkbox (React)

如何使复选框的行为类似于React中的单选按钮

2 个答案: