React AG Grid中无法选中行进行删除的技术问题咨询

Hey there! Let's fix that row selection and deletion issue with AG Grid in your React component. Looking at your code, there are a few key things missing or misconfigured that are causing the problem. Here's how to resolve it step by step:

1. Fix this Binding Issues #

In class components, you need to ensure your methods are bound to the component instance so this refers correctly to your component. There are two clean ways to handle this:

Option 1: Bind methods in the constructor

constructor(props) {
  super(props); // Don't forget to call super() first!
  this.state = { rowSelection: 'single' };
  // Bind your methods to the component instance
  this.onGridReady = this.onGridReady.bind(this);
  this.onRemoveSelected = this.onRemoveSelected.bind(this);
}

Option 2: Use arrow functions for class methods (more concise)

class MyComponent extends Component {
  // Use class property initializer for state
  state = { rowSelection: 'single' };

  // Arrow functions auto-bind `this` to the component
  onGridReady = (params) => {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
  };

  onRemoveSelected = () => {
    const selectedData = this.gridApi.getSelectedRows();
    this.gridApi.updateRowData({ remove: selectedData });
  };
  // ... rest of your component code
}

2. Pass rowSelection to the AG Grid Component #

You defined rowSelection in your state, but you need to pass it as a prop to the <AgGridReact> component so AG Grid enables row selection:

render() {
  return (
    <div>
      <button onClick={this.onRemoveSelected}>Delete Selected Row</button>
      <AgGridReact
        rowSelection={this.state.rowSelection} // Critical prop to enable selection
        onGridReady={this.onGridReady}
        columnDefs={yourColumnDefs} // Your column definitions go here
        rowData={yourRowData} // Your data source goes here
      />
    </div>
  );
}

3. Fix the Typo in Button onClick #

In your code snippet, you have onClick={this.onRemoveSelect... which looks like a partial typo. Make sure it matches your method name exactly: onClick={this.onRemoveSelected}.

4. Optional: Add Checkbox Selection (For Better UX) #

If you want users to select rows via a checkbox (a common pattern), add checkboxSelection: true to one of your column definitions (usually the first column):

const yourColumnDefs = [
  { field: 'id', checkboxSelection: true },
  { field: 'name' },
  // ... other columns
];

Full Corrected Component Example #

Here's how everything comes together:

import React, { Component } from 'react';
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

class MyComponent extends Component {
  state = {
    rowSelection: 'single',
    rowData: [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
    ],
    columnDefs: [
      { field: 'id', checkboxSelection: true },
      { field: 'name' },
    ],
  };

  onGridReady = (params) => {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
  };

  onRemoveSelected = () => {
    const selectedData = this.gridApi.getSelectedRows();
    if (selectedData.length > 0) {
      this.gridApi.updateRowData({ remove: selectedData });
      console.log('Deleted rows:', selectedData);
    } else {
      console.log('No rows selected to delete!');
    }
  };

  render() {
    return (
      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <button onClick={this.onRemoveSelected} style={{ marginBottom: 10 }}>
          Delete Selected Row
        </button>
        <AgGridReact
          rowSelection={this.state.rowSelection}
          onGridReady={this.onGridReady}
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}
        />
      </div>
    );
  }
}

export default MyComponent;

These changes should resolve the issue where you couldn't select rows and delete them. The core fixes are ensuring proper this binding, passing the rowSelection prop to AG Grid, and correcting the button's click handler.

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