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

Question

So I am working on a search bar for a website of mine, and I am having a bit of trouble with one of the components I'm using, react-select . Below is some example code

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;
    }

    });
  };

The issue

I am not sure how to fetch the value of what is typed into the box before the new value is selected.

The Goal

I am aiming to search google for the term typed into the field when a user selects "Search Google Index"

Answer 1

According to react-select , to get the value typed in, you can use onInputChange props as following:

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

In your component calling:

<Select
onInputChange={handleInputChange}

....

/>

Demo

Update:

Recommendation:

You should use react-select drop-down only to show the list of users not for search options. For search options you can have two buttons.