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

Question

我试图遵循这个例子。我几乎逐行复制了它，添加了5个产品，因为示例中未给出该数据。一切都显示正确，所以从理论上讲，我已经正确设置了它，但是过滤器似乎不像在示例中那样工作。有什么想法吗？这就是我所拥有的：https://stackblitz.com/edit/react-mmvhyv?file=Table.js

Answer 1

问题是数据字段和字段，它们是匹配的productsqualityselectOption

它尝试将数据与 的 进行比较productsqualityselectOptionkey

所以要么你改变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},

]

工作演示

或

更改为 ：selectOptions

const selectOptions = {

    'good' : 'good',

    'Bad' : 'Bad',

    'unknown' : 'unknown',

};

const handleClick = () => {

    qualityFilter('good'); // <---- here to

};

Answer 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和性别上添加选择筛选器。观察use_transport是布尔值，而性别是字符串“男性”不大写。在 UI 上，如果将此两个字段表示为use_transport=“假”和“性别=”男性“。然后，您需要创建选项映射，如下所示，false

 const genderSelectOptions = {

        "male": "Male",

        "female": "Female",

        "other": "Other"

    };

  const booleanSelectOptions = {

       true:"true",

       false: "false"

  }

键将是响应中的值，映射的值将是你在 UI 上表示的值。

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

然后，必须将唯一键绑定为 bootstrap 表标记中的键字段

<BootstrapTable

    striped hover condensed pagination={true} 

    search

    keyField='ID'

    data={this.state.students}

    columns={this.state.columns} 

    filter={filterFactory()}

    pagination={paginationFactory()} />