如何在反应引导表2标题单元格中向单元格添加复选框？答案

【问题标题】：how to add checkbox to cells in react bootstrap table2 header cells?如何在反应引导表2标题单元格中向单元格添加复选框？
【发布时间】：2019-02-14 08:05:27
【问题描述】：

我正在使用 react-bootstrap-table-next 并想在某些标题单元格中添加“复选框”。我参考了文档-https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Welcome&selectedStory=react%20bootstrap%20table%202%20&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel，但找不到相关示例。有谁能帮忙吗？

import BootstrapTable from 'react-bootstrap-table-next';

class Container extends React.Component{

    render(){
        <BootstrapTable keyField="PartNumber" selectRow={selectRowProp}
                    data={this.state.data} columns={this.state.columns}/>
    }

}

标题单元格中复选框的预期输出 -

【问题讨论】：

“零件编号”中的左侧图标是复选框吗？
是的.. 单元格中的所有图标都是复选框

标签： reactjs react-bootstrap-table

【解决方案1】：

我使用“headerFormatter”来自定义标题单元格。以下是工作代码和输出截图

state = {
    columns: MYResult.ParametricList_Attributes || []
};

componentDidMount(){
    const checkbox = (column, colIndex) => {
        //console.log(colIndex)
        //console.log("column text "+column.text)
        if("Part Number"==column.text || "Product Line"==column.text){
            return (
                <div>
                    {column.text}  
                    <span><input type="checkbox" name="something" value="" /></span>
                </div>
            );
        }else{
            return (
            <div>
                {column.text}  
            </div>
            )
        }
    }
    const newColumn = this.state.columns.map((column) => {
        //console.log("column --"+column.text)
            return {...column, headerFormatter: checkbox};
    });
    //console.log("newColumn --"+newColumn)
    this.setState({columns: newColumn });
}

【讨论】：