我使用react-select从选项列表中进行多项选择。
所需行为
即使用户通过检查InputActionMeta中的action选择了一个选项，我也会保留输入值。一旦选择了与当前搜索输入匹配的所有选项，我想清除该输入。因此，我正在寻找一种方法来获得根据搜索输入筛选的可用选项的数量。
我还没有创建一个自定义的过滤函数，因为默认的过滤函数对我来说已经足够好了。有没有办法在不复制过滤方法的情况下获得可用的过滤选项的计数？
编辑
有问题的代码：
<Select
isMulti
name='users'
classNamePrefix='user-select'
closeMenuOnSelect={false}
backspaceRemovesValue={true}
options={this.state.users}
placeholder='Select Users...'
onChange={(data) => {
var searchTerm = this.state.searchTerm
this.setState({selectedUsers:data, searchTerm:searchTerm})
}}
maxMenuHeight={200}
onInputChange={(input,reason) => {
if(reason.action==='input-change'||reason.action==='set-value')
this.setState({searchTerm:input})
else
this.setState({searchTerm:''})
}}
isLoading={this.state.loading}
inputValue={this.state.searchTerm}
/>
用户对象：
users = [
{value:'test1@test.com', label:'Test 1'},
{value:'test2@test.com', label:'Test 2'},
{value:'test3@test.com', label:'Test 3'},
{value:'sample1@test.com', label:'Sample 1'},
{value:'sample2@test.com', label:'Sample 2'},
{value:'sample3@test.com', label:'Sample 3'},
]
示例用例
我搜索sample，"样本1"、"样本2"one_answers"样本3"现在都在筛选选项中。当我选择前两个用户时，搜索框中的"示例"仍然存在。一旦我选择了最后一个匹配选项，我就想清除搜索项。
我还没有找到一种原生的react-select方法来获得筛选项目的计数。但是你可以利用这个技巧来计数。我希望react select使用默认的match本身。
- 您需要创建一个新的状态，比如
filterCount来保存筛选项目的计数 - Rest是基本的JS过滤
onInputChange((input,reason) => {
const currentInput = input.toLowerCase();
const filteredItems = users.filter(user =>
user.value.toLowerCase().match(currentInput)
);
if(reason.action==='input-change'||reason.action==='set-value') {
this.setState({searchTerm: input, filterCount: filteredItems.length})
} else {
this.setState({searchTerm: '', filterCount: filteredItems.length})
}
}
}