Question

如果可以帮助我，是否可以在使用js map时将功能分配给react-bootstrap-table dataFormat ...

<BootstrapTable data={this.state.users} data-url="data.json" hover pagination={true}
                search ClassName="table" options={options} 
                data-response-handler="responseHandler" exportCSV={true}>
{
   this.state.userAdminGrid.columns.map((vis, index) => {
   <TableHeaderColumn dataSort key={index} 
                      dataField={vis.field} 
                      isKey={vis.isKey} 
                      hidden={!vis.checked}
                      dataAlign="center" 
                      dataFormat={vis.fieldFormat}>
           {vis.fieldDescription}
   </TableHeaderColumn>
})
}
</BootstrapTable>

this.state.userAdminGrid.columns看起来像这样，基本上只有最后一列需要dataFormat，我希望在其中分配名为isActiveFormat的函数

columns: Array(6)
0: {fieldId: 1, field: "userId", fieldDescription: "Id", checked: false, order: 9, …}
1: {fieldId: 4, field: "surename", fieldDescription: "Prezime", checked: true, order: 1, …}
2: {fieldId: 3, field: "name", fieldDescription: "Ime", checked: true, order: 2, …}
3: {fieldId: 2, field: "username", fieldDescription: "Username", checked: true, order: 5, …}
4: {fieldId: 5, field: "roleDescription", fieldDescription: "Rola", checked: true, order: 6, …}
5:
   checked: true
   field: "isActive"
   fieldDescription: "Aktivan"
   fieldFormat: "isActiveFormat"
   fieldId: 6
   isKey: false
   order: 8
__proto__: Object
length: 6
__proto__: Array(0)

函数isActiveFormat看起来像

isActiveFormat(cell) {
    console.log("I got in");
    return (
        <Toggle on={'Aktivan'} off={'Neaktivan'} size="xs" offstyle="danger" active={cell} />
    );
}

这是一个结构，因为我将网格列保留在DB中，并且每个用户都可以选择他希望看到的顺序和列，isActive列是简单的布尔值，我想在其中使用{{ 1}}控制...

Answer 1

您可以调用类似dataFormat={this[vis.fieldFormat]}>或dataFormat={() => this[vis.fieldFormat]()}>的函数

向dataFormat BootstrapTable分配功能

1 个答案: