如何在MUI X Data Grid的输入框onChange事件中勾选行复选框

要实现Usage输入框触发onChange时选中对应Data Grid行，核心是通过selectionModel手动控制选中状态，结合React状态管理完成，具体实现如下：

步骤说明 #

1. 用useState维护选中行的ID集合
2. 给Data Grid绑定selectionModel和onSelectionModelChange，实现状态双向绑定
3. 在TextField的onChange事件中，更新选中状态为当前行ID

修改后的完整代码 #

import { useState } from 'react';
import { DataGrid } from '@mui/x-data-grid';
import TextField from '@mui/material/TextField';

// 假设data是你已定义的数据源
export default function YourComponent() {
  // 维护选中行的ID数组
  const [selectionModel, setSelectionModel] = useState([]);

  const columns = [
    { field: 'part_code', headerName: 'Part Code', width: 200 },
    {
      field: 'part_usage',
      headerName: 'Usage',
      width: 150,
      renderCell: (params) => {
        return (
          <TextField
            type="number"
            InputLabelProps={{ shrink: true }}
            defaultValue={1}
            variant="standard"
            onChange={() => {
              // 单选模式：仅选中当前行，取消其他行选中
              setSelectionModel([params.id]);
              
              // 若需多选模式，替换为以下逻辑：
              // setSelectionModel(prevSelected => 
              //   prevSelected.includes(params.id)
              //     ? prevSelected.filter(id => id !== params.id) // 已选中则取消
              //     : [...prevSelected, params.id] // 未选中则添加
              // );
            }}
          />
        );
      }
    }
  ];

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={data}
        columns={columns}
        getRowId={(row) => row.part_id}
        pageSize={5}
        rowHeight={38}
        rowsPerPageOptions={[5]}
        checkboxSelection
        disableSelectionOnClick
        components={{ Toolbar: CustomToolbar }}
        // 绑定选中状态
        selectionModel={selectionModel}
        onSelectionModelChange={(newSelection) => {
          setSelectionModel(newSelection);
        }}
      />
    </div>
  );
}

关键细节说明 #

• selectionModel是Data Grid控制选中行的核心属性，接收行ID数组作为值
• disableSelectionOnClick仅禁止点击行本身触发选中，手动通过setSelectionModel修改状态不受影响
• params.id对应当前行的ID，由你配置的getRowId={(row) => row.part_id}决定
• 代码默认实现单选逻辑，如需多选可切换注释的代码块

内容的提问来源于stack exchange，提问作者Pusoy