如何在react ag-grid中选中或取消选中复选框时触发函数

Question

伙计们，基本上我试图在选择或取消选择任何复选框时触发一个函数，为此我使用 cellRenderer：“agCheckboxCellRenderer”， onSelectionChanged 在这种情况下没有用，因为我需要使用选定的行其他海豚，所以这就是为什么我想专门使用复选框触发该功能，有什么办法可以做到这一点？或者有没有一种方法可以在选择复选框后，嵌套复选框的单元格被选中并触发我需要的功能？因为当我单击复选框时，单元格不会被选中

这基本上是我的 ag-grid 表的定义

const hashValueGetter = (params) => {
      return params.node ? params.node.rowIndex + 1 : null;
    };

    const [colDefs, setColDefs] = useState([]);

    const defaultLabelColumns = [
      {
        headerName: "Hide",
        field: "checked",
        cellRenderer: "agCheckboxCellRenderer",
        cellRendererParams: {
          disabled: false,
        },
        maxWidth: 70,
      },
      {
        field: "make",
        headerName: "Case #",
        maxWidth: 80,
        valueGetter: hashValueGetter,
      },
      { field: "name", headerName: "Line Name", width: 180 },
    ];

const defaultColDef = useMemo(() => {
      return {
        resizable: true,
        filter: false,
      };
    }, []);

    const onSelectionChanged: (params: any) => void = useCallback(
      (params: any) => {
        const selectedNodes: any = params.api.getSelectedNodes();
        console.log("selected nodes",selectedNodes);
      },
      [plotData],
    );
   <div
      className="ag-theme-balham"
      style={{ height: "100%", width: "99%", maxWidth: "99%" }}
    >
      <AgGridReact
        columnDefs={colDefs}
        defaultColDef={defaultColDef}
        rowData={plotData}
        rowHeight={30}
        pagination={true}
        paginationPageSize={4}
        rowSelection="multiple"
        domLayout="autoHeight"
        animateRows={true}
        onSelectionChanged={onSelectionChanged}
      />
    </div>

如果我需要提供更多规格，请告诉我

Answer 1

我通过使用 onCellValueChanged 并指定我的复选框所在的列来管理此操作，这样我可以在选择或取消选择任何复选框时触发一个函数

const onCellValueChanged = (event: any) => {
      if (event.colDef.field === "checked") {
        event.api.forEachNode((node) => {
          if (node.data.checked) {
            plotData[node.rowIndex].visible = false
          }
          else {
            plotData[node.rowIndex].visible = true
          }
          setPlotData([...plotData])
        });
      }
    };

        <div
          className="ag-theme-balham"
          style={{ height: "100%", width: "99%", maxWidth: "99%" }}
        >
          <AgGridReact
            columnDefs={colDefs}
            defaultColDef={defaultColDef}
            rowData={plotData}
            rowHeight={30}
            pagination={true}
            paginationPageSize={4}
            rowSelection="multiple"
            domLayout="autoHeight"
            animateRows={true}
            onSelectionChanged={onSelectionChanged}
            onCellValueChanged={onCellValueChanged}
          />
        </div>