react-select - 如何关闭菜单 onNewOptionClick？

Question

我的代码

<Creatable
   name="productType"=
   options = {this.state.productOptions}
   value = {this.state.productType}
   onNewOptionClick = {this.createProductType}
   onChange = {this.handleProductChange}  
 />

createProductType(option) {
    var options = this.state.productOptions;
    var label = option.label.charAt(0).toUpperCase() + option.label.slice(1);
    options.push({
        label: label,
        value: option.value
    })
    this.setState({
        productOptions: options,
        productType: option.value
    })
}

在我点击新选项之前：

单击新选项后：

单击新选项后所需的 UI 状态：

由于我不确定使用 onNewOptionClick 的确切方式，因此没有将其作为问题发布在 Github 上。

Answer 1

我能够通过添加一个来解决这个问题ref

ref={input => this.productSelect = input }

然后这样称呼它

this.productSelect.select.closeMenu();

这（https://github.com/JedWatson/react-select/issues/1262）提供了帮助我解决这个问题的最终线索。谢谢。

Answer 2

closeMenu()已在 React-Select 的 v2 中贬值。它已被替换为blur()以下为我工作：

// Assign the ref in your Select object
<Select ref={input => this.selectRef = input } ... />

// Later in your code when you are trying to close the menu
this.selectRef.select.blur();

Answer 3

不确定自第一个答案以来图书馆是否发生了重大变化，但我必须这样做：

ref={input => {
  if (input) this.productSelectMenu = input._selectRef.select
}}

然后：

this.productSelectMenu.closeMenu();