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

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”作为可用补全之一，那么选择它将清空建议列表，但会显示"add new tag: 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
            }}