response-select: показывать только совпадающие параметры при вводе на выбранном входе

Я начал использовать response-select совсем недавно. (https://github.com/JedWatson/react-select)

Если поле выбора пусто и 1. Я сосредотачиваюсь на входе выбора ИЛИ, 2. Я нажимаю перевернутую стрелку, расположенную справа от входа выбора, я вижу все параметры в списке результатов, который я предоставил. компоненту Select по умолчанию.

Вместо вышеупомянутого поведения я должен видеть совпадающие текстовые результаты только тогда, когда я что-то набираю на входе. Как я могу этого добиться?


reactjs javascript react-select
person Wenger    schedule 08.07.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Управляйте отображением меню с помощью свойства menuIsOpen и добавляйте пользовательские обработчики событий для onInputChange, onChange и onBlur: onInputChange вы просто проверяете, является ли выполняемое действие изменением ввода, а затем устанавливаете openMenu (в состоянии компонента) в значение true; onChange и onBlur вы просто скрываете меню.

<Select
    inputValue={value}
    onInputChange={this.handleInputChange}
    onChange={this.hideMenu}
    onBlur={this.hideMenu}
    options={dataSource}
    menuIsOpen={openMenu}
/>


    handleInputChange = (query, { action }) => {
        if (action === "input-change") {
            this.setState({ openMenu: true });
        }
    };


hideMenu = () => {
    this.setState({ openMenu: false });
};

Источник: https://github.com/JedWatson/react-select/issues/2014#issuecomment-448549849

person rajesh kumar    schedule 19.07.2019

arrow_upward
0
arrow_downward

Вы можете удалить стрелку, указав arrowRenderer со значением null, и сделать так, чтобы параметры отображались только при вводе, отключив открытие в фокусе и щелкнув:

Пример

function App() {
  return (
    <Select
      arrowRenderer={null}
      options={[{ value: 1, label: "foo" }, { value: 2, label: "bar" }]}
      openOnFocus={false}
      openOnClick={false}
    />
  );
}
person Tholle    schedule 08.07.2018
comment
Спасибо за ответ. Эти параметры работали отлично в первый раз, когда я сосредоточился на вводе, но в тот момент, когда я снова щелкнул на вводе ... параметры появились сразу же, хотя ввод все еще был пустым. Есть ли способ убедиться, что параметры никогда не должны отображаться, когда поле ввода пустое? - person Wenger; 09.07.2018
comment
@Wenger Это расстраивает. Эта кажется открытой проблемой, которая пока не имеет реального решения в react-select. - person Tholle; 09.07.2018