как скрыть пустую метку в реакции-начальной загрузке - PullRequest
Новая
       20

как скрыть пустую метку в реакции-начальной загрузке

0 голосов
/ 04 июля 2019

Я использую модуль response-bootstrap-typeahead в одном из моих приложений. Это работает нормально, за исключением одного случая.

Я не могу отправить форму, если нет результатов. В этом случае я получаю отключенную опцию с Совпадений не найдено .

enter image description here

Я использовал prop emptyLabel = "", что дает мне результат, как показано ниже enter image description here

В обоих случаях, когда я нажимаю клавишу ESC, эта опция исчезает, а затем я могу отправить свою форму.

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

Вот мой код 

<form onSubmit={this.formSubmit}>
  <Typeahead
    labelKey="name"
    flip={true}
    dropup={true}
    autoFocus={true}
    options={this.state.options}
    ref={(typeahead) => this.typeahead = typeahead}
    id="qbox"
    placeholder="Type your queries here..."
    onInputChange={this.updateText}
    onBlur={(e) => this.updateText(e.target.value, e)}
    onChange={this.valueChanged}
    maxResults={5}
    minLength={5}
  />
  <button type="submit">Submit</button>
</form>

1 Ответ

1 голос
/ 05 июля 2019

Скрытие меню

Вам необходимо добавить собственную логику для отображения меню, поскольку ложные значения для emptyLabel больше не скрывают меню в v4.Из документов миграции :

Это было устаревшим решением, введенным до того, как renderMenu мог вернуть null.Это больше не так, и теперь необходимо использовать renderMenu для достижения поведения

Вы можете скрыть меню, когда результатов нет, передав следующее renderMenu: 

<Typeahead
  ...
  renderMenu={(results, menuProps) => {
    // Hide the menu when there are no results.
    if (!results.length) {
      return null;
    }
    return <TypeaheadMenu {...menuProps} options={results} />;
  }}
/>

Отправка формы

Блоки заголовка типа формируют отправку, когда меню открыто, чтобы предотвратить непреднамеренную отправку.Вы можете обойти это, добавив следующее: 

<Typeahead
  ...
  onKeyDown={(e) => {
    // Submit the form when the user hits enter.
    if (e.keyCode === 13) {
      this.form.submit();
    }
  }}
/>

Соберите все вместе 

<form ref={(form) => this.form = form}>
  <Typeahead
    id="rbt-example"
    onKeyDown={(e) => {
      // Submit the form when the user hits enter.
      if (e.keyCode === 13) {
        this.form.submit();
      }
    }}
    options={options}
    placeholder="Type your queries here..."
    renderMenu={(results, menuProps) => {
      // Hide the menu when there are no results.
      if (!results.length) {
        return null;
      }
      return <TypeaheadMenu {...menuProps} options={results} />;
    }}
  />
  <button type="submit">Submit</button>
</form>

Живой пример: https://codesandbox.io/s/react-bootstrap-typeahead-rtb1s

...