React中Bootstrap Table的data-checkbox等属性不生效，复选框不显示如何解决

错误原因 #

• 你参考的是jQuery版本Bootstrap Table的用法，其自带的data-*属性在React环境下不会自动生效，不会自动渲染复选框和绑定选择事件
• react-bootstrap自带的Table组件仅提供基础表格样式，没有内置行选择功能，且你引入时大小写错误（应为大写Table，小写的table是原生DOM元素）

解决方案1：使用适配React的表格库实现（推荐） #

推荐使用react-bootstrap-table-next，自带完整的行选择能力，无需手动处理复选框逻辑

步骤1：安装依赖 #

npm install react-bootstrap-table-next react-bootstrap-table2-toolkit bootstrap

步骤2：引入依赖与基础配置 #

import axios from 'axios';
import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Selection } from 'react-bootstrap-table2-toolkit';
// 引入必要样式
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

const { SelectRow } = Selection;

步骤3：改写render逻辑 #

render() {
  // 表格列配置
  const columns = [
    {
      dataField: 'key1',
      text: 'key1'
    },
    {
      dataField: 'key2',
      text: 'key2'
    }
  ];
  // 行选择配置
  const selectRow = {
    mode: 'checkbox', // 复选框模式
    clickToSelect: true // 点击整行即可选中
  };
  const tableData = this.state.message?.Items || [];

  return (
    <div>
      <div className="viewall">
        <ToolkitProvider
          keyField="id" // 替换为你数据里唯一标识的字段，没有的话可以用索引
          data={tableData}
          columns={columns}
        >
          {
            props => (
              <BootstrapTable
                {...props}
                selectRow={selectRow}
                hover // 启用行悬停效果
              />
            )
          }
        </ToolkitProvider>
      </div>
    </div>
  );
}

如果需要获取选中项，直接给selectRow配置onSelect、onSelectAll事件即可拿到选中的行数据。

解决方案2：手动实现选择逻辑（无需新增依赖） #

如果不想引入新的第三方库，可以自己维护选中状态实现功能：

步骤1：新增选中状态 #

在组件state中添加存储选中行的状态：

state = {
  // 其他原有state
  selectedRows: new Set(),
  selectAll: false
}

步骤2：改写表格渲染逻辑 #

render() {
  const obj = this.state.message;
  const tableData = obj.Items || [];
  const { selectedRows, selectAll } = this.state;

  // 单行选择切换
  const toggleRowSelect = (key) => {
    const newSelected = new Set(selectedRows);
    newSelected.has(key) ? newSelected.delete(key) : newSelected.add(key);
    this.setState({
      selectedRows: newSelected,
      selectAll: newSelected.size === tableData.length
    })
  }

  // 全选切换
  const toggleSelectAll = () => {
    const newSelectAll = !selectAll;
    const newSelected = newSelectAll ? new Set(tableData.map((_, idx) => idx)) : new Set();
    this.setState({
      selectAll: newSelectAll,
      selectedRows: newSelected
    })
  }

  return (
    <div>
      <div className="viewall">
        <table className="table table-hover">
          <thead>
            <th>
              <input 
                type="checkbox" 
                checked={selectAll}
                onChange={toggleSelectAll}
              />
            </th>
            <th scope="col">key1</th>
            <th scope="col">key2</th>
          </thead>
          <tbody>
            {tableData.map((data, key) => {
              return (
                <tr 
                  key={key}
                  onClick={() => toggleRowSelect(key)}
                  style={{cursor: 'pointer'}}
                >
                  <td onClick={(e) => e.stopPropagation()}>
                    <input 
                      type="checkbox" 
                      checked={selectedRows.has(key)}
                      onChange={() => toggleRowSelect(key)}
                    />
                  </td>
                  <td>{data.key1}</td>
                  <td>{data.key2}</td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

之后直接从state.selectedRows中拿到所有选中的行索引，对应获取原数据即可。

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