Получение выбранного значения в React-Select - PullRequest
Новая
       20

Получение выбранного значения в React-Select

3 голосов
/ 19 сентября 2019

Я пытаюсь реализовать этот пример, который получает выбранное пользователем значение, , но с использованием асинхронной версии выбора.

Я хочу получить значение, выбранное пользователем, но, просматривая документы по реакции выбора, не совсем понятно, как это сделать.Если вы установили состояние равным inputValue, как только вы нажмете кнопку «submit», inputValue будет очищено.Вы получаете обратно

" "

вместо

user selected value

Я не уверен, как получить выбранное пользователем значение с помощью асинхронноговыберите компонент.У меня есть данные API, успешно заполняющие и фильтрующие окно предложений, но я не могу понять, как получить выбранное значение.

Я пробовал множество методов и, наконец, попробовал использовать подход refs, как в приведенной выше ссылке, но сохраненное значение отображается как ноль.Вместо сохранения выбранного пользователем значения. Вот ссылка на мои неработающие коды и коробка .

Может кто-нибудь помочь или указать мне правильное направление?

Редактировать

Вот ссылка на рабочую демонстрацию , если кто-то застрянет на этомв будущем.

1 Ответ

4 голосов
/ 19 сентября 2019

Итак, что вы ошиблись, так это реквизиты реакции-выбора, чтобы получить значение при изменении.Используйте onChange вместо onInputChange на вашем AsyncSelect компоненте.Оба реквизита предназначены для разных целей.Вот документация для всех реквизитов, доступных для реакции-выбора.https://react -select.com / props Попробуйте код ниже 


textChange = inputValue => { // whole object of selected option 
    this.setState({ inputValue:inputValue.value });
};

render(){
....
        <AsyncSelect
          defaultOptions
          loadOptions={this.promiseOptions}
          onChange={this.textChange} /** onChange triggers only when user change the
           options but onInputChange triggers on each change which is for different
           purpose like for e.g. when user type, fetch similar options **/
          name="options"
        />
}
...