React 引导表 2 以编程方式选择过滤器

Question

我试图遵循这个例子。我几乎逐行复制了它，添加了5个产品，因为示例中未给出该数据。一切都显示正确，所以从理论上讲，我已经正确设置了它，但是过滤器似乎不像在示例中那样工作。

有什么想法吗？这就是我所拥有的：https://stackblitz.com/edit/react-mmvhyv?file=Table.js

Answer 1

问题是数据字段和字段，它们是匹配的productsqualityselectOption它尝试将数据与 的 进行比较productsqualityselectOptionkey所以要么你改变productsconst products = [&nbsp; &nbsp; {"id": "1", "name":"john", "quality":"unknown"},&nbsp; &nbsp; {"id": "2", "name":"jane", "quality":"good"},&nbsp; &nbsp; {"id": "3", "name":"bob", "quality":"Bad"},&nbsp; &nbsp; {"id": "4", "name":"ralph", "quality":"Bad"},]自：const products = [&nbsp; &nbsp; {"id": "1", "name":"john", "quality":2},&nbsp; &nbsp; {"id": "2", "name":"jane", "quality":0},&nbsp; &nbsp; {"id": "3", "name":"bob", "quality":1},&nbsp; &nbsp; {"id": "4", "name":"ralph", "quality":1},]工作演示或更改为 ：selectOptionsconst selectOptions = {&nbsp; &nbsp; 'good' : 'good',&nbsp; &nbsp; 'Bad' : 'Bad',&nbsp; &nbsp; 'unknown' : 'unknown',};const handleClick = () => {&nbsp; &nbsp; qualityFilter('good'); // <---- here to};

Answer 2

如果您正在调用 API 并填充表，则需要检查响应数据并将其与 UI 上显示的文本进行映射。例如：&nbsp; {&nbsp; &nbsp; &nbsp; "ID": 1,&nbsp; &nbsp; &nbsp; "CreatedAt": "2021-09-02T04:30:45.37+05:30",&nbsp; &nbsp; &nbsp; "UpdatedAt": "2021-09-02T04:30:45.37+05:30",&nbsp; &nbsp; &nbsp; "DeletedAt": null,&nbsp; &nbsp; &nbsp; "Gender":"male",&nbsp; &nbsp; &nbsp; "roll_no": 1,&nbsp; &nbsp; &nbsp; "first_name": "Ravi",&nbsp; &nbsp; &nbsp; "use_transport": false&nbsp; &nbsp; }假设我们要在use_transport和性别上添加选择筛选器。观察use_transport是布尔值，而性别是字符串“男性”不大写。在 UI 上，如果将此两个字段表示为use_transport=“假”和“性别=”男性“。然后，您需要创建选项映射，如下所示，false&nbsp;const genderSelectOptions = {&nbsp; &nbsp; &nbsp; &nbsp; "male": "Male",&nbsp; &nbsp; &nbsp; &nbsp; "female": "Female",&nbsp; &nbsp; &nbsp; &nbsp; "other": "Other"&nbsp; &nbsp; };&nbsp; const booleanSelectOptions = {&nbsp; &nbsp; &nbsp; &nbsp;true:"true",&nbsp; &nbsp; &nbsp; &nbsp;false: "false"&nbsp; }键将是响应中的值，映射的值将是你在 UI 上表示的值。注意：在表中有一个唯一的ID很重要，您可以将其隐藏。筛选器在内部使用该 ID 来区分唯一记录。然后，必须将唯一键绑定为 bootstrap 表标记中的键字段<BootstrapTable&nbsp; &nbsp; striped hover condensed pagination={true}&nbsp;&nbsp; &nbsp; search&nbsp; &nbsp; keyField='ID'&nbsp; &nbsp; data={this.state.students}&nbsp; &nbsp; columns={this.state.columns}&nbsp;&nbsp; &nbsp; filter={filterFactory()}&nbsp; &nbsp; pagination={paginationFactory()} />