以编程方式预选 Material-UI 数据网格中的一行（React）

Question

我目前正在创建一个 React Web 应用程序，并使用谷歌的 Material-UI 中的 DataGrid。网格根据选择列表的选择进行渲染（即，如果选择列表是水果，并且用户选择苹果，则相关的数据网格将渲染有关苹果的信息。如果用户选择另一个水果，则将渲染另一个相关的数据网格，类似于主/详细关系）。

由于 DataGrid 提供行选择，我希望每次网格呈现时都预先选择第一行，包括用户第一次进入页面时。目前，网格在未选择任何行的情况下进行渲染，并且需要用户单击行才能进行选择。我看到受控选择可能是可能的（https://material-ui.com/components/data-grid/selection/#control-selection），尽管文档没有详细解释这一点。

我还尝试了 stackOverflow 中的 hack（我可以在material-ui DataGrid 中初始化复选框选择吗？），但这似乎也不起作用。我觉得这个功能比我想象的更容易实现，并且应该开箱即用。先感谢您！

编辑：添加示例代码以供参考。

import * as React from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { useDemoData } from '@material-ui/x-grid-data-generator';

export default function SingleRowSelectionGrid() {
  
const [selectedRowID, setSelectedRowID] = useState(0);


  const columns = [
    { field: "id", headerName: "ID", width: 70 },
    { field: "firstName", headerName: "First name", width: 130 },
    { field: "lastName", headerName: "Last name", width: 130 },
    {
      field: "age",
      headerName: "Age",
      type: "number",
      width: 90,
    },

  ];

  const rows = [
    { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
    { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
    { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
    { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
    { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
    { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
    { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
    { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
    { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
  ];



  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid 
                rows={rows} 
                columns={columns}
                onSelectionChange={(selectedRow) => {
                        setSelectedRowID(selectedRow.rowIds[0])}}
                  
      />
    </div>
  );
}

Answer 1

您需要在组件selectionModel中使用 prop DataGrid。

...
      <DataGrid
        checkboxSelection
        rows={rows} 
        columns={columns}
        onSelectionChange={(newSelection) => {
          setSelection(newSelection.rowIds);
        }}
        selectionModel={selectedRows}
      />
...