javascript - 在行单击时反应材料 UI 数据网格

Question

当客户点击材料ui的组件数据网格时，我怎样才能达到这样的结果，他将能够点击该行并且我将在datagrid表下方的行上加红？目前我有：

 <DataGrid rows={rows_} 
        columns={columns} 
        pageSize={5} 
        checkboxSelection />

我的整个代码是：

import React, {useEffect, useState} from "react";
import { DataGrid } from "@material-ui/data-grid";
import CircularProgress from "@material-ui/core/CircularProgress";
import vars from "../../variables/vars";

import axios from "axios";

const columns = [
  { field: "id", headerName: "ID", width: 70 },
  { field: "email", headerName: "Email", width: 130 },
  { field: "role", headerName: "Role", width: 130 },
];


export default function UserProfile() {
  const [rows_, setRows_] = useState([])
  const [loaded, setLoaded] = useState(false)
  useEffect(() => {
    (async () => {
      const {data} = await axios({url: vars.BACKENDURL + "/admin/getallusers", method: "POST" });
      console.log(data)
      data.forEach( d => {
        setRows_(curr => [...curr, {id: d._id, email: d.email, role: d.role}])
      })
      
      setLoaded(true)
    })()
  }, [])
  return (
    <div>
    {loaded === false ? <div style={{ height: 400, width: "100%" }}>
        <CircularProgress/>
      </div> : <><div style={{ height: 400, width: "100%" }}>
        <DataGrid rows={rows_} 
        columns={columns} 
        pageSize={5} 
        checkboxSelection />
      </div>< />}
      
    </div>
  );
}

我想获取整行的数据。谢谢！

标签： javascriptreactjsmaterial-uimaterial-design