Question

我已实施react-select以允许根据自动完成建议输入代码和/或插入新代码。

我的实施如下：

import Select from 'react-select';
...    
<Select.AsyncCreatable
    className='add-tags'
    clearable={!!selectionTags}
    placeholder={'add more'}
    name="form-field-name"
    value={selectionTags}
    onChange={setSelectionTags}
    loadOptions={loadOptions}
    promptTextCreator={(label)=>`add new tag: ${label}`}
    inputProps={inputProps}
    multi
/>

当selectionTags是已选择的代码列表时，setSelectionTags是一个向该列表添加新选定项目的功能，loadOptions包含自动填充建议列表

问题是，如果我输入“ta”并且我将“tag1”作为可用的完成之一，那么选择它将清空建议列表，但会显示“添加新标签：ta”条目。

知道为什么它也没被删除？

谢谢！

Answer 1

在React-Select github上关注此主题：
https://github.com/JedWatson/react-select/issues/1663

我最后通过添加以下选项来解决这个问题：

ref={s => (selectRef = s)} // store a reference to the select instance

onChange={tags => {
                selectRef.select.closeMenu(); // close the entire menu
                selectRef.select.setState({
                    isFocused: false,         // remove focus from new tag option
                });
                setSelectionTags(tags);       // call the add tags method with the new set of tags
            }}

选择其中一个建议选项后，提示文本不会消失

1 个答案: