如何将值传递给react-bootstrap中checkbox组件中的（htmlFor）属性？

Question

我在一个项目中维护 WCAG2.0 'AA'标准，我需要在react-bootstrap的checkbox组件中为 for 属性提供一个值，但是找不到合适的解决方案。

代码:: 我在写什么jsx

<Checkbox checked={ props.item.selected || false }
onChange={() => {}}>
    <div className="label-text"></div>
</Checkbox>

我在html中的样子：

<div class="checkbox">
    <label title="">
        <input type="checkbox" value="on">
        <div class="label-text"></div>
    </label>
</div>

寻找一种html：

<label **for="boxa"**>birds</label>
<input **id="boxa"** type="checkbox" name="mytext" />

Answer 1

您可以查看来自react-bootstrap的组件的源代码，但 TLDR ：他们不提供添加选项 for组件上的Checkbox属性。甚至还有一个eslint禁用 for 。

这里是复选框附带标签的source。