带有 Ant-Design 页面的 ReactJs 已打开表中选中的复选框答案

【问题标题】：ReactJs with Ant-Design page is opened checkbox selected in Table带有 Ant-Design 页面的 ReactJs 已打开表中选中的复选框
【发布时间】：2022-11-22 22:18:55
【问题描述】：

我正在使用 Ant-Design 创建一个 React 项目。打开页面时，我想选中表格中的几个复选框。

钩：

  const [selectedPages, setSelectedPages] = useState([]);

行选择：

  let rowSelectionPages = {
    selectedPages,
    onChange: onSelectPagesChange,
    selections: [Table.SELECTION_ALL, Table.SELECTION_NONE],
    getCheckboxProps: (record) => {
      return {
        disabled: record.screenName === 'Disabled',
        name: record.screenName,
        defaultChecked: record.key === 1
      };
    },
  };

onSelectPagesChange：

  let onSelectPagesChange = (newSelectedPages) => {
    setSelectedPages(newSelectedPages);
  };

列：

  let columnsPages = [
    {
      title: "screen name",
      dataIndex: "screenName",
      render: (text) => <a>{text}</a>,
    },
  ];

我的数据：

  let dataPages = [
    {
      key: "1",
      screenName: "Home",
    },
    {
      key: "2",
      screenName: "Login",
    },
    {
      key: "3",
      screenName: "profile",
    },
    {
      key: "4",
      screenName: "Disabled",
    },
  ];

桌子：

<Table
            rowSelection={{
              type: "checkbox",
              ...rowSelectionPages,
            }}
            columns={columnsPages}
            dataSource={dataPages}
          />

我是第一次使用 Ant-Design 库。这是我试过的代码。但我无法得出结论。

【问题讨论】：

标签： javascript reactjs arrays checkbox antd

【解决方案1】：

在状态选择中添加行索引

const [selectedPages, setSelectedPages] = useState([0]); // check first row

demo

【讨论】：