0

我正在使用 React 和 React-Table 版本 7。它对我来说效果很好，但我想在我的顶级标题中添加一个复选框。所以我这样尝试：

const columns = React.useMemo(
    () => [

        {
            Header: 'Monster Types <input type="checkbox" id="horns" name="horns">',
            columns: [
                {
                    Header: 'Possible Dungeons',
                    accessor: 'dungeonNames',
                    Cell: ({ row }) => <div>{row.original.dungeonNames.join(', ')}</div>,
                    Filter: TraineeSelectColumnFilter,
                    sortType: "basic",
                    filter: 'includes'
                },
                {
                    Header: 'Monsters',
                    accessor: 'monsterNames',
                ...

但是当我这样做时，它只是打印出 HTML 而不是实际的复选框。

所以它看起来像这样：

Monster Types<input type="checkbox" id="horns" name="horns">

有谁知道在 React-Table 标头旁边添加 HTML 输入的方法？

谢谢！

4

1 回答 1

0

对于任何可能会发现这一点的人，我发现了如何做到这一点。您将 HTML 放在该Header部分中，然后添加一个 id，如下所示：

  Header: () => (<div>Monster Types <input type="checkbox" id="horns" name="horns"></div>),
  id: 'monsterTypesDiv',
于 2021-01-26T16:17:25.560 回答