Question

我希望记住一系列复选框。这是可能的，但是，我想在复选框旁边添加文本来描述该选项。

options = ["option 1", "option 2", "option 3"];
options = options.map((option) => <Checkbox value={option} key={option}/>);

  return (
    <CheckboxGroup name={name} onChange={onChange}>
      {options}
    </CheckboxGroup>
  );

这将呈现：

<input type="checkbox" value="option 1">
<input type="checkbox" value="option 2">
<input type="checkbox" value="option 3">

但是，我希望能够呈现此图像：

<input type="checkbox" value="option 1">option 1
<input type="checkbox" value="option 2">option 2
<input type="checkbox" value="option 3">option 3

用组件名称旁边的选项名称来呈现这组选项的最佳方法是什么？

Answer 1

输入元素没有任何子代。您必须将复选框与相关文本包装在p或div中。然后，您可以设置它的显示格式

应该像<div><input.../>{option}</div>这样

Answer 2

根据OP的评论和第三方组件的文档，您可以通过以下操作获得它们：

options = options.map((option) => (<label><Checkbox value={option} key={option}/>{option}</label>));

将它们包装在label中可完成两件事：

这使HTML在语义上是正确的（单击标签文本的任何人都将自动选中该复选框；制表符将起作用，依此类推）
React希望您将内容包装在单个包装器中（可以是一个span或div，但只有标签可以为您提供上述语义上的好处）。

Answer 3

render() {
    options = ["option 1", "option 2", "option 3"];
    options = options.map((option) => <label><Checkbox value={option} key={option}/> {option} </label>);

    return (
      <CheckboxGroup name="fruits">
        {options}
      </CheckboxGroup>
    );
  }

渲染带有其他文本的React组件列表

3 个答案: