PrimeReact DataTable含复选框列时无法使用onCellClick/onCellSelect事件求助

问题原因 #

PrimeReact内置的selectionMode="multiple"复选框列，会在内部处理复选框的点击事件并阻止事件冒泡，导致单元格级别的onCellClick、onCellSelect无法触发。这是组件的设计行为，而非bug。

解决方案 #

方案1：使用行级事件替代 #

放弃单元格事件，改用DataTable提供的行级事件onRowClick或onRowSelect，这两个事件不受复选框列的影响，能正常触发并返回行数据：

import { useState } from "react";
import { DataTable, Column } from "primereact/datatable";

function App() {
  const [products] = useState([
    { id: 1, name: "Product 1" },
    { id: 2, name: "Product 2" }
  ]);
  const [selectedProducts, setSelectedProducts] = useState([]);

  return (
    <DataTable
      value={products}
      selectionMode="multiple"
      selection={selectedProducts}
      onSelectionChange={(e) => setSelectedProducts(e.value)}
      // 行点击事件
      onRowClick={(e) => console.log("行点击触发", e.data)}
      // 行选中事件（仅复选框状态变化时触发）
      onRowSelect={(e) => console.log("行选中触发", e.data)}
    >
      <Column selectionMode="multiple" headerStyle={{ width: "3rem" }} />
      <Column field="name" header="Product Name" />
    </DataTable>
  );
}

export default App;

方案2：自定义复选框列并手动维护状态 #

如果必须在复选框单元格内绑定事件，可以完全自定义列内容，使用PrimeReact的Checkbox组件手动处理选中状态，同时在复选框上绑定点击事件：

import { useState } from "react";
import { DataTable, Column } from "primereact/datatable";
import { Checkbox } from "primereact/checkbox";

function App() {
  const [products] = useState([
    { id: 1, name: "Product 1" },
    { id: 2, name: "Product 2" }
  ]);
  const [selectedProducts, setSelectedProducts] = useState([]);

  // 处理复选框选中/取消逻辑
  const toggleSelection = (rowData) => {
    const updatedSelection = selectedProducts.some(item => item.id === rowData.id)
      ? selectedProducts.filter(item => item.id !== rowData.id)
      : [...selectedProducts, rowData];
    setSelectedProducts(updatedSelection);
  };

  return (
    <DataTable value={products}>
      <Column
        headerStyle={{ width: "3rem" }}
        body={(rowData) => (
          <Checkbox
            checked={selectedProducts.some(item => item.id === rowData.id)}
            onChange={() => toggleSelection(rowData)}
            // 绑定复选框单元格点击事件
            onClick={() => console.log("复选框单元格点击触发")}
          />
        )}
      />
      <Column field="name" header="Product Name" />
    </DataTable>
  );
}

export default App;

注意：自定义列时，不要直接在<Column>标签上绑定onClick，该属性并非Column组件的暴露API，需要在body渲染的元素（如Checkbox）上绑定事件。

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