TA貢獻(xiàn)1799條經(jīng)驗 獲得超8個贊
問題是數(shù)據(jù)字段和字段，它們是匹配的productsqualityselectOption
它嘗試將數(shù)據(jù)與 的 進(jìn)行比較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
};
TA貢獻(xiàn)1816條經(jīng)驗 獲得超4個贊
如果您正在調(diào)用 API 并填充表，則需要檢查響應(yīng)數(shù)據(jù)并將其與 UI 上顯示的文本進(jìn)行映射。
例如：
{
"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
}
假設(shè)我們要在use_transport和性別上添加選擇篩選器。觀察use_transport是布爾值，而性別是字符串“男性”不大寫。在 UI 上，如果將此兩個字段表示為use_transport=“假”和“性別=”男性“。然后，您需要創(chuàng)建選項映射，如下所示，false
const genderSelectOptions = {
"male": "Male",
"female": "Female",
"other": "Other"
};
const booleanSelectOptions = {
true:"true",
false: "false"
}
鍵將是響應(yīng)中的值，映射的值將是你在 UI 上表示的值。
注意：在表中有一個唯一的ID很重要，您可以將其隱藏。篩選器在內(nèi)部使用該 ID 來區(qū)分唯一記錄。
然后，必須將唯一鍵綁定為 bootstrap 表標(biāo)記中的鍵字段
<BootstrapTable
striped hover condensed pagination={true}
search
keyField='ID'
data={this.state.students}
columns={this.state.columns}
filter={filterFactory()}
pagination={paginationFactory()} />
舉報