data-checkbox data-click-to-select 不工作 reactjs

Question

此代码执行 bootstrap table 的渲染。在这个 table 中，有 2 列数据和总共 4 行。我希望在第一列数据之前的旁边有一个复选框 select 整行数据。我试过使用“data-click-to-select”和“data-checkbox”，但没有出现复选框。我应该怎么做才能按行启用 selection 数据？

不确定是不是因为我没有导入任何 react-bootstrap 模块。

import axios from 'axios';
import React, { Component } from 'react';
import { table } from 'react-bootstrap'; // this is reflected as an unused variable

这是我试图按照以下示例获取复选框：https://live.bootstrap-table.com/example/methods/get-selections.html

   render() {
            const obj = (this.state.message);
            const datamapping = Object.entries(this.state.message);
            return (
                <div>
                    <div className="viewall">
                        <table class="table table-hover" data-click-to-select="true">
                            <thead>
                                <th data-checkbox="true"></th>
                                <th scope="col">key1</th>
                                <th scope="col">key2</th>
                            </thead>
                            <tbody>
                                {obj.Items?.map((data, key) => {
                                    return (
                                        <tr key={key}>
                                            <td></td>
                                            <td>{data.key1}</td>
                                            <td>{data.key2}</td>
                                        </tr>
                                    )
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        }

Answer 1

找到了一个不依赖于数据复选框或数据点击的变通解决方案select - 通过点击每行上的按钮并一起发送键（数组编号）数据结束。

 handleClick(obj, i) {
        //this.props.history.push("/signIn.js");
        console.log(obj.Items[i]);
    }

render() {
            const obj = (this.state.message);
            const datamapping = Object.entries(this.state.message);
            return (
                <div>
                    <div className="viewall">
                        <table class="table table-hover">
                            <thead>
                                <th data-checkbox="true"></th>
                                <th scope="col">key1</th>
                                <th scope="col">key2</th>
                            </thead>
                            <tbody>
                                {obj.Items?.map((data, key) => {
                                    return (
                                        <tr key={key}>
                                            <td>
                                               <button type="button" class="btn btn-primary" onClick={ () => this.handleClick(obj, key)}>
                                                  Sign In
                                              </button>
                                            </td>
                                            <td>{data.key1}</td>
                                            <td>{data.key2}</td>
                                        </tr>
                                    )
                                })}
                            </tbody>
                        </table>
                    </div>
                </div>
            );
        }

data-checkbox data-click-to-select 不工作 reactjs

data-checkbox data-click-to-select not working reactjs

react-bootstrap

getselection