如何在NewOptionClick上关闭菜单？

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状态：

是否要将此作为Github上的问题发布，因为我不确定使用onNewOptionClick的确切方法。

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的depreciated中。它已被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();