没有ID的React Bootstrap自定义复选框？答案

【问题标题】：React Bootstrap custom checkbox without id?没有ID的React Bootstrap自定义复选框？
【发布时间】：2020-08-25 14:46:18
【问题描述】：

我很难理解为什么这个简单的 Bootstrap custom checkbox 不起作用。我正在使用 React、Bootstrap 和 React-Boostrap。

import React from "react";
import ReactDOM from "react-dom";
import { Button, Form, FormCheck } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return (
    <div className="p-3">
      <FormCheck custom label="Checkbox">
      </FormCheck>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Online Example

将id="test" 添加到FormCheck 似乎可以使复选框起作用，但是否可以不必使用id？（在我的实际代码中，复选框在对象的组件中使用，为每个复选框提供唯一的 id 会不必要地复杂）

【问题讨论】：

标签： javascript reactjs checkbox bootstrap-4

【解决方案1】：

试试这个：

<FormCheck>
  <FormCheck.Label>Allow us to contact you?
    <FormCheck.Input isInvalid type={radio} />
  </FormCheck.Label>
  <Feedback type="invalid">Yo this is required</Feedback>
</FormCheck>

基本的想法是你需要改变它的呈现方式。默认情况下，它在同一级别上具有标签和输入，这意味着您必须使用id 和for 绑定它们。并且您想将输入放在标签内以在没有id 的情况下绑定它。

您可能需要一些自定义 CSS，如此答案中所述：https://stackoverflow.com/a/57901478/4536543

【讨论】：

【解决方案2】：

最终找到了解决方案 here（正常引导 4）

<FormCheck custom>
  <FormCheck.Label>
    <FormCheck.Input type="checkbox" name="checkbox-name" />
      <div className="custom-control-label"></div>
    </FormCheck.Label>
</FormCheck>

它涉及一些变通方法，将标签与复选框嵌套。 Bootstrap 4 自定义按钮似乎有奇怪的行为

【讨论】：

【解决方案3】：

如果您确实想使用 React Bootstrap 组件，则必须使用 ID 才能使用 FormCheck 组件。这就像在 FormCheck 组件中使用 ID 调用 useContext() 一样，以便组件可以通过 DOM 访问元素。

Source Code:

/** A HTML id attribute, necessary for proper form accessibility. */
id: PropTypes.string,

const { controlId } = useContext(FormContext);
const innerFormContext = useMemo(
  () => ({
    controlId: id || controlId,
    custom,
  }),
  [controlId, custom, id],
);

来源

【讨论】：