以編程方式關閉反應選擇菜單

Question

React-select 默認行為是在輸入值為空時彈出菜單。 我想修改此行為，以便當輸入為空時，無論是在用戶鍵入任何內容之前還是用戶退格以進入空狀態之前，菜單都將關閉。

我找不到任何啟用此行為的道具，所以我想通過調用一些關閉onInputChange中的菜單的函數來以編程方式執行此操作。 就像是：

onInputChange={(inputValue) => {
      this.setState({
        inputValue,
      });
      this.selectRef.closeMenu();
    }}

我嘗試在Select ref 上使用blur()但它只是在不關閉菜單的情況下模糊了輸入，這絕對不是我正在尋找的行為。

是否有暴露的道具或功能可以滿足我的需求？

Answer 1

您可以像這樣設置menuIsOpen onInputChange ：

handleInputChange = input => {
    this.setState({ open: !!input });
}

<Select
    onInputChange={this.handleInputChange}
    menuIsOpen={this.state.open}
/>

Answer 2

我單獨保持open狀態

const [open, setOpen] = useState(false);

<Select
  menuIsOpen={open}
  onMenuOpen={() => setOpen(true)}
  onMenuClose={() => setOpen(false)}
/>

當我想關閉它時設置為 false。 在這種情況下，像這樣

onInputChange={(text) => {
  if (text === '') {
    setOpen(false);
  }
}}