React-Select - Как получить текстовое значение формы до появления OnChange? - PullRequest
Новая
       2

React-Select - Как получить текстовое значение формы до появления OnChange?

1 голос
/ 03 марта 2020

Итак, я работаю над панелью поиска для моего веб-сайта, и у меня возникли небольшие проблемы с одним из компонентов, которые я использую, Reaction-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"

1 Ответ

1 голос
/ 03 марта 2020

Согласно act-select , чтобы получить введенное значение, вы можете использовать onInputChange реквизиты следующим образом: 

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

В вызове компонента: 

<Select
onInputChange={handleInputChange}

....

/>

Демонстрация

Обновление:

Рекомендация:

Вы должны использовать только раскрывающийся список реакции-выбора показать список пользователей не для параметров поиска. Для параметров поиска вы можете иметь две кнопки.

...