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

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

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

" "

вместо того

user selected value

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

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

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

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

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


reactjs react-select
person AlwaysBeLearning    schedule 19.09.2019    source источник
comment
Кажется, что их пример с документами тоже не работает?   -  person Jon B    schedule 19.09.2019

Ответы (1)


arrow_upward
4
arrow_downward

Итак, что вы ошиблись, так это props of response-select, чтобы получать значение при изменении. Используйте onChange вместо onInputChange в AsyncSelect Компоненте. Оба реквизита предназначены для разных целей. Вот документ для всех свойств, доступных для response-select. 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"
        />
}
person saurssaurav    schedule 19.09.2019
comment
Большое спасибо @saurssaurav! Это было легким решением. Это объясняет, почему с onChange ничего не работает (поскольку он выводит объект выбранного значения), но он работает с onTextChange (выводит строку того, что пользователь фактически набирает). Ваше здоровье! - person AlwaysBeLearning; 19.09.2019