javascript - 以编程方式预先选择 Material-UI 数据网格中的一行(React)

Question

我目前正在创建一个 React 网络应用程序，并使用来自谷歌的 Material-UI 的 DataGrid。网格根据选择列表的选择呈现(即，如果选择列表是水果，并且用户选择苹果，则相关的 DataGrid 将呈现有关苹果的信息。如果用户选择另一个水果，另一个相关的数据网格将呈现，类似于主/从关系)。

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

我还尝试了来自 stackOverflow( Can I initialize the checkbox selection in a material-ui DataGrid? ) 的 hack，但这似乎也没有用。我觉得这个功能比我自己做的更容易实现，应该开箱即用。提前致谢!

编辑:添加示例代码以供引用。

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

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

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