React-Select - 如何在 OnChange 发生之前获取表单的文本值？

Question

所以我正在为我的网站开发一个搜索栏，我在使用其中一个组件react-select时遇到了一些麻烦。下面是一些示例代码

const baseOptions = [
      { label: 'Users', options: 
      [
      ]
      },
      { label: 'Pages', options: 
      [
      ]
      },
      { label: 'Search Google Index', value: 'search_google_index', type: "google_index" },
      { label: 'Search Bing Index', value: 'search_bing_index', disabled: 'yes' },
    ]

  handleSearchChange = selectedOption => {
    this.setState({
      selectedOption,
    }, () => {
    console.log(`Option selected:`, this.state.selectedOption);
    switch (this.state.selectedOption.type) {
      case "user":
      window.location = "/@" + this.state.selectedOption.label
        break;
      case "google_index":
      console.log("Searching google index");

            /*Here is where I need to catch the value of react-select*/

        break;
      default:
        break;
    }

    });
  };

问题

在选择新值之前，我不确定如何获取输入到框中的内容的值。

目标

当用户选择“搜索 Google 索引”时，我的目标是在 google 中搜索输入到该字段中的术语

Answer 1

根据react-select，要获取输入的值，您可以使用onInputChangeprops 如下：

  handleInputChange = (inputValue) => {
        //get the character entered by user here in inputValue
  };

在您的组件调用中：

<Select
onInputChange={handleInputChange}

....

/>

演示

更新：

推荐：

您应该仅使用 react-select 下拉菜单来显示用户列表，而不是搜索选项。对于搜索选项，您可以有两个按钮。