React bootstrap table 2以编程方式选择过滤器答案

【问题标题】：React bootstrap table 2 programmatically select filterReact bootstrap table 2以编程方式选择过滤器
【发布时间】：2020-06-11 06:28:17
【问题描述】：

我正在尝试遵循以下示例：

https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Select%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

我几乎逐行复制了它，添加了 5 种产品，因为示例中没有给出这些数据。一切都正确显示，所以理论上我已经正确设置了它，但是过滤器似乎不像示例中那样工作。

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

问题在于 products 数据 quality 字段和 selectOption 字段，它们是匹配的

它尝试将products 数据quality 与selectOption 的key 进行比较

所以要么你改products

const products = [
    {"id": "1", "name":"john", "quality":"unknown"},
    {"id": "2", "name":"jane", "quality":"good"},
    {"id": "3", "name":"bob", "quality":"Bad"},
    {"id": "4", "name":"ralph", "quality":"Bad"},
]

收件人：

const products = [
    {"id": "1", "name":"john", "quality":2},
    {"id": "2", "name":"jane", "quality":0},
    {"id": "3", "name":"bob", "quality":1},
    {"id": "4", "name":"ralph", "quality":1},
]

WORKING DEMO

或

将selectOptions 更改为：

const selectOptions = {
    'good' : 'good',
    'Bad' : 'Bad',
    'unknown' : 'unknown',
};

const handleClick = () => {
    qualityFilter('good'); // <---- here to
};

WORKING DEMO

【讨论】：

【解决方案2】：

如果您正在调用 API 并填充表格，则需要检查响应数据并将其与 UI 上显示的文本进行映射。

例如：

  {
      "ID": 1,
      "CreatedAt": "2021-09-02T04:30:45.37+05:30",
      "UpdatedAt": "2021-09-02T04:30:45.37+05:30",
      "DeletedAt": null,
      "Gender":"male",
      "roll_no": 1,
      "first_name": "Ravi",
      "use_transport": false
    }

假设我们要在 use_transport 和 Gender 上添加选择过滤器。观察 use_transport 是布尔值 false 和 Gender 是字符串“男性”，没有大写。在 UI 上，如果您将这两个字段表示为 use_transport="false" 和 Gender="Male"。然后你需要创建选项映射如下，

 const genderSelectOptions = {
        "male": "Male",
        "female": "Female",
        "other": "Other"
    };

  const booleanSelectOptions = {
       true:"true",
       false: "false"
  }

键将是响应的值，地图的值将是您在 UI 上表示的值。

注意：在您的表格中拥有一个唯一的 ID 很重要，您可以将其隐藏起来。过滤器在内部使用该 ID 来区分唯一记录。

然后必须将唯一键绑定为 Bootstrap 表标签中的 keyField

<BootstrapTable
    striped hover condensed pagination={true} 
    search
    keyField='ID'
    data={this.state.students}
    columns={this.state.columns} 
    filter={filterFactory()}
    pagination={paginationFactory()} />

【讨论】：