有没有办法在 react-select 中获取过滤选项的数量?

Is there a way to get the count of filtered options in react-select?

我正在使用 react-select 选项列表中的多个 selection。

要求的行为

即使在用户 select 选中 InputActionMeta 中的 action 选项后,我也会保留输入值。一旦与当前搜索输入匹配的所有选项都被 selected,我想清除输入。所以我正在寻找一种方法来获取根据搜索输入过滤的可用选项的数量。

我没有创建自定义过滤器功能,因为默认功能对我来说已经足够好了。有什么方法可以在不自己复制过滤方法的情况下获得可用过滤选项的数量?

编辑

有问题的代码:

<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 和 'Sample 1','Sample 2' 和 'Sample 3' 现在在筛选选项中。当我select前2个用户时,搜索框里的'sample'还在。一旦我 select 最后一个匹配选项,我想清除搜索词。

我还没有找到一种本机 react-select 方法来获取筛选项的计数。但是你可以利用这个技巧来计算。我希望 react-select 使用默认 match 本身。

  • 您需要创建一个新状态,比如 filterCount 来保存筛选项的计数。
  • 其余是基本的 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})
        }
    }
  }