如何使用react-bootstrap-table2实现右键点击展开表格行

要把react-bootstrap-table2的行展开触发方式从默认左键改成右键，核心是接管展开的控制逻辑，通过监听右键事件手动切换行的展开状态，具体实现如下：

关键实现要点 #

1. 禁用默认左键展开：通过expandBy: 'custom'让组件放弃默认触发逻辑，交由自定义代码控制
2. 维护展开状态：用状态变量记录当前展开的行，精准控制每一行的展开/收起状态
3. 监听右键事件：绑定contextmenu事件触发展开逻辑，同时阻止浏览器默认右键菜单弹出

完整代码示例 #

import React, { useState } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import expandableFactory from 'react-bootstrap-table2-expand';

const ExpandableTable = () => {
  // 记录展开的行，键为行的唯一标识（示例用id），值为布尔值表示展开状态
  const [expandedRows, setExpandedRows] = useState({});

  // 处理行右键点击事件
  const handleRowRightClick = (row, event) => {
    // 阻止浏览器默认右键菜单弹出
    event.preventDefault();
    // 切换当前行的展开状态
    const rowKey = row.id;
    setExpandedRows(prevState => ({
      ...prevState,
      [rowKey]: !prevState[rowKey]
    }));
  };

  const expandRow = {
    // 启用自定义展开控制
    expandBy: 'custom',
    // 绑定展开状态
    expanded: expandedRows,
    // 自定义展开内容的渲染
    renderer: row => (
      <div className="p-3">
        <h5>行{row.id}详情</h5>
        <p>名称：{row.name}</p>
        <p>描述：{row.desc}</p>
      </div>
    ),
    // 给行绑定右键事件
    rowEvents: {
      contextmenu: handleRowRightClick
    }
  };

  // 列定义
  const columns = [
    { dataField: 'id', text: 'ID', sort: true },
    { dataField: 'name', text: '名称' },
    { dataField: 'desc', text: '描述' }
  ];

  // 模拟表格数据
  const tableData = [
    { id: 1, name: '项目A', desc: '这是项目A的描述内容' },
    { id: 2, name: '项目B', desc: '这是项目B的描述内容' },
    { id: 3, name: '项目C', desc: '这是项目C的描述内容' }
  ];

  return (
    <BootstrapTable
      keyField="id"
      data={tableData}
      columns={columns}
      expandRow={expandRow}
    />
  );
};

export default ExpandableTable;

注意事项 #

• 确保项目已安装react-bootstrap-table-next和react-bootstrap-table2-expand依赖包
• 行的唯一标识需根据实际数据选择（示例用id，可替换为其他唯一字段）
• 若需保留左键的其他交互，只需不在rowEvents中处理click事件即可

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