Как забрать значение input из react-select

Question

Я сделал селект с поиском с помощью библиотеки react-select.

Я забираю значение из поля в любом случае: будь то только ввод букв в инпат или выбор из списка и этот код работает:

import CreatableSelect from "react-select/creatable";

  <CreatableSelect                                                                      
          onChange={(e) => onChangeFunc(e.value)}//забирает ваш выбор из списка
          getNewOptionData={onChangeFunc} //забирает каждую букву введенную в инупт
          styles={selectStyle}
          options={options}
        />

Но есть одна весомая проблема: Если слово в инпуте полностью совпадает с каким либо значением из списка, то это

getNewOptionData={onChangeFunc} //забирает каждую букву

не работает. Видимо авторами библиотеки подразумевается при совпадении именно выбор селекта из списка.

Для наглядности добавлю:

Вот это сработает и getNewOptionData отдаст мне букву М

Вот это тоже сработает и я получу Москв

А вот тут, при совпадении, обработчик не срабатывает. Только если вручную выбрать из списка

Как сделать, что бы даже при совпадении я мог достать значение из инпут? т.е. что б именно выбор из списка был не обязательным

Answer 1

Решил.

React-select позволяет нам заменять любые компоненты своими собственными

Вот тут вверху список компонентов для замены

https://react-select.com/components

Мы должны заменить событие onChange в Input своим собственным. Для этого заменим компонент Input. Теперь нам необязательно использовать CreatableSelect. Вот код селекта:

import Select from "react-select";

    const Input = (props) => {
     const newOnChange = (e) => {
       props.onChange(e) //Вызываем стандартное событие
       MyOnChange(e.target.value) //Вызываем нужное нам
     }
     const newProps = {...props, onChange: (e)=>newOnChange(e)}
     return <components.Input {...newProps} />
}

       <Select
          components={{ Input}}
          onChange={(e) => onChange(e.value)}
          styles={selectStyle}
          options={options}
        />

В коде выше мы заменили стандартный компонент Input добавив в стандартное событие onChange нашу функцию MyOnChange которая отлавливает вводимые в инпут символы.

Обратите внимание, что для корректной работы мы сохранили стандартный onChange и уже дополнительно к нему добавили свой обработчик

Значение желательно записывать в ref т.к. это может вызвать избыточный рендер

БЛОГ НА HUSL

Как забрать значение input из react-select

Ответы (1 шт):