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 ，要獲取輸入的值，您可以使用onInputChange道具，如下所示：

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

在您的組件調用中：

<Select
onInputChange={handleInputChange}

....

/>

演示

更新：

推薦：

您應該僅使用 react-select 下拉菜單來顯示用戶列表，而不是搜索選項。 對於搜索選項，您可以有兩個按鈕。