所以我必须使用react表v6。在表下面我使用react-select。但是当我尝试过滤表中的数据时,出现了一些问题。它就是不起作用。我将向您展示我正在使用的request wich的示例。以及我是如何尝试过滤表中的数据的。
这是我的React-选择,我提供了选项和chanhleChange fn:
<Select
onChange={handleChange}
isMulti
options={options}
/>
下面是handleChange fn:
const handleChange = v => {
setSelectedOptions(v);
console.log('handleChange value :', v);
};
要在select中提供带有react-select库的选项,需要使用这个技巧(我不知道为什么这么难...)。
const options = tags.map((i) => ({
value: i,
label: i,
}));
这里我将局部状态selectedOption扁平化,因为我想将其用作“includes”方法中的值
const flatenSelectedOption = selectedOption?.map(item => item?.value).flat();
在select中选择后,数据看起来像这样,这就是为什么我使用flatenSelectedOption将它们展平:
choosenOptionsFromselect: [
0: {value: 'Country', label: 'Country'}
1: {value: 'Carrier', label: 'Carrier'}
]
flatenSelectedOption : (2) ['Country', 'Carrier']
然后在这里,我尝试过滤表依赖于选择值。
const sortedTableByTags = tableData.filter((item) =>item.tags?.name?.includes(flatenSelectedOption));
然后这里有一个简单的规则。如果我们从select中选择了一些值,我们应该使用过滤数组,如果不显示所有数据。
<ReactTable
data={(selectedOption?.length === 0 || selectedOption == null) ? tableData : sortedTableByTags}
但是排序不会发生,当我从选择中选择某个内容时,我会得到一个空表。下面是一个小gif和控制台console.log screenshot的屏幕截图。
Gif - Select work
1条答案
按热度按时间9bfwbjaz1#
所以伙计们,我解决了我自己的排序问题。它帮助我对表中的数据进行排序。
我做的第二个改进是将onChange选择函数更改为。