如何为react jsx中的复选框设置名称

Question

我正在尝试在复选框输入中设置名称，但它似乎不起作用：

const DepartmentRow = ({ data }) =>
<tbody>
  <tr>
    <td><input type="checkbox" name="ListOfDepartments" value={data.department}/>
      <span>{data.departament}</span>
    </td>
  </tr>
</tbody>;

DepartmentRow.propTypes = {
    data: PropTypes.object
};

在数据中，我收到一个有部门的用户对象。如果我写：

<td>{data.department}</td>

它有效，它显示部门的名称，因此我收到了有关数据的正确信息。

这就是我现在所得到的：

我想要这个：

谢谢！

Answer 1

看起来你的输入div占据了整个空间。尝试使用display:inline-block的单个div，并在其中放置input和span。

Answer 2

您的代码中可能有拼写错误，您是否尝试拨打names[1]而不是data.department？

以下为我工作

data.departament