javascript如何删除Material UI DataGrid（Reactjs）中的特定行

Question

我将在react&；目前进展顺利。 然而，我有一个问题

我想要的功能是：我想要删除你看到的每一行，点击该行的复选框。例如，如果单击第1行中的复选框&；3，我想要第1行和第2行；3将被删除。我还希望跟踪我决定删除的行

问题是，我不知道如何去做，即使在做了研究之后，我仍然觉得如何解决这个问题

目前，我正在用我在网上找到的一些示例JSON数据填充这个表，所以不必介意存在的奇怪数据。此外，如果有人建议更简单或更干净的方法来实现这一点，请随时在评论中告诉我

代码如下：

import React, { Component } from 'react';
import { DataGrid } from '@material-ui/data-grid';
import Button from '@material-ui/core/Button';


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,
    },
    {
      field: 'fullName',
      headerName: 'Full name',
      description: 'This column has a value getter and is not sortable.',
      sortable: false,
      width: 160,
      valueGetter: (params) =>
        `${params.getValue('firstName') || ''} ${params.getValue('lastName') || ''}`,
    },
    { field: 'city', headerName: 'City', width: 100 },
    { field: 'state', headerName: 'State', width: 100 },
  ];
  
  const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35, city: 'Milwaukee', state: 'Wisconsin' },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42, city: 'Dubuque', state: 'Iowa' },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45, city: 'Appleton', state: 'Wisconsin'},
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16, city: 'Madison', state: 'Wisconsin' },
    { id: 5, lastName: 'Targaryenmnsdlfbsjbgjksbgksbfksfgbk', firstName: 'Daenerys', age: null, city: 'Green Bay', state: 'Wisconsin' },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150, city: 'San Antonio', state: 'Texas' }, 
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44, city: 'Dallas', state: 'Texas' },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36, city: 'Brooklyn', state: 'New York' },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65, city: 'Toledo', state: 'Ohio' },
    { id: 10, lastName: 'Larry', firstName: 'King', age: 105, city: 'Chicago', state: 'Illiniois' },
    { id: 11, lastName: 'Snow', firstName: 'Jon', age: 35, city: 'Milwaukee', state: 'Wisconsin' },
    { id: 12, lastName: 'Lannister', firstName: 'Cersei', age: 42, city: 'Dubuque', state: 'Iowa' },
    { id: 13, lastName: 'Lannister', firstName: 'Jaime', age: 45, city: 'Appleton', state: 'Wisconsin'},
    { id: 14, lastName: 'Stark', firstName: 'Arya', age: 16, city: 'Madison', state: 'Wisconsin' },
    { id: 15, lastName: 'Targaryenmnsdlfbsjbgjksbgksbfksfgbk', firstName: 'Daenerys', age: null, city: 'Green Bay', state: 'Wisconsin' },
    { id: 16, lastName: 'Melisandre', firstName: null, age: 150, city: 'San Antonio', state: 'Texas' }, 
    { id: 17, lastName: 'Clifford', firstName: 'Ferrara', age: 44, city: 'Dallas', state: 'Texas' },
    { id: 18, lastName: 'Frances', firstName: 'Rossini', age: 36, city: 'Brooklyn', state: 'New York' },
    { id: 19, lastName: 'Roxie', firstName: 'Harvey', age: 65, city: 'Toledo', state: 'Ohio' },
    { id: 20, lastName: 'Larry', firstName: 'King', age: 105, city: 'Chicago', state: 'Illiniois' },
  ];

class ElgibleContracts extends Component {
    render(){
        return (
            <div style={{textAlign: "center"}}>
                <h1 style={{fontFamily: "Stone"}}>Elgible Contracts</h1>
                <span className="horizontal-line" />
                <div className="centerDiv" style={{ height: 380, width: 950}}>
                    <DataGrid rows={rows} columns={columns} pageSize={10} checkboxSelection />
                </div>
                <br />
                <Button variant="contained" color="primary" onClick={this.getInfo} >Purge</Button>
            </div>
        )
    }
}

export default ElgibleContracts;

Answer 1

我为此创建了一个沙盒：https://codesandbox.io/s/heuristic-davinci-n3vrz?file=/src/App.js

我使用了功能组件和挂钩，因为这是当今的最佳实践

   const [rows, setRows] = useState(data);
   const [deletedRows, setDeletedRows] = useState([]);

   const handleRowSelection = (e) => {
    setDeletedRows([...deletedRows, ...rows.filter((r) => r.id === e.data.id)]);
  };

  const handlePurge = () => {
    setRows(
      rows.filter((r) => deletedRows.filter((sr) => sr.id === r.id).length < 1)
    );
  };

  return (
    <div style={{ textAlign: "center" }}>
      <h1 style={{ fontFamily: "Stone" }}>Elgible Contracts</h1>
      <span className="horizontal-line" />
      <div className="centerDiv" style={{ height: 380, width: 950 }}>
        <DataGrid
          rows={rows}
          columns={columns}
          pageSize={10}
          checkboxSelection
          onRowSelected={handleRowSelection}
        />
      </div>
      <br />
      <Button variant="contained" color="primary" onClick={handlePurge}>
        Purge
      </Button>

Answer 2

const ElgibleContracts = () => {
  const [items, setItems] = React.useState(rows)
  const [selection, setSelection] = React.useState([]);
  const [deleted, setDeleted] = React.useState([])
  const handlePurge = () => {
    setDeleted([...deleted, ...selection])
    setItems(items.filter(i=> !selection.some(s=> s.id === i.id)))
    setSelection([])
  }
  console.log("Here are deleted items",deleted)
        return (
            <div style={{textAlign: "center"}}>
                <h1 style={{fontFamily: "Stone"}}>Elgible Contracts</h1>
                <span className="horizontal-line" />
                <div className="centerDiv" style={{ height: 380, width: 950}}>
                    <DataGrid  onSelectionChange={(newSelection) => {
          setSelection(newSelection.rows);
        }} rows={items} columns={columns} pageSize={10} checkboxSelection />
                </div>
                <br />
                <Button variant="contained" color="primary" onClick={handlePurge} >Purge</Button>
            </div>
        )
    }

Answer 3

使用onRowSelected可能很快就会出错，因为在DataGrid中取消选择项时必须重置deletedRows。这就是为什么我建议使用onSelectionModelChange：

const [rows, setRows] = useState(data);
const [deletedRows, setDeletedRows] = useState([]);

<DataGrid
  checkboxSelection
  columns={columns}
  pageSize={5}
  onSelectionModelChange={({selectionModel}) => {
    const rowIds = selectionModel.map(rowId => parseInt(String(rowId), 10));
    const rowsToDelete = rows.filter(row => rowIds.includes(row.id));
    setDeletedRows(rowsToDelete);
  }}
  rows={rows}
/>