Запретить загрузку опций в выпадающем меню SELECT, пока не будут введены минимальные символы - PullRequest
Новая
       16

Запретить загрузку опций в выпадающем меню SELECT, пока не будут введены минимальные символы

0 голосов
/ 27 января 2020

здесь я пытаюсь загрузить опции в выпадающем списке, только когда введено минимум 5 символов. Это потому, что мой список опций огромен, и это снижает производительность моих приложений.

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

this.state= {
  options_show: false, // It's false in state
};

 inputEntered(e) {
    let value = e.target.value;
    if (value.length > 5){
      this.setState({options_show: true})
    }
  }

  handleChangeName = (e, i) => {
    let { nameID, nameIDArray } = this.state;
    let filteredID = namesData.filter(name => name.name == e.value)
      .map((name) => {
        return name.id
      })
    nameIDArray[i] = filteredID[0];
    this.setState({ nameIDArray });
  };

  <Select placeholder="Enter Profile Name"
          name="SID0"
          onChange={(e) => this.handleChangeName(e, 0)}
          options={this.state.options_show ? options: []}
          onInputChange={this.inputEntered}
          // openMenuOnFocus={false}
          // openMenuOnClick={false}
        />

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

1 Ответ

1 голос
/ 28 января 2020

Попробуйте с надеждой, что это сработает:) 

this.state= {
    options_show: false, // It's false in state
}

inputEntered(inputText) {                     
    if (inputText.length >= 5) {
        this.setState({ options_show: true })
    } else {
        this.setState({ options_show: false })
    }
}

<Select placeholder="Enter Profile Name"
    name="SID0"
    onChange={(e) => this.handleChangeName(e, 0)}
    options={this.state.options_show ? options: []}
    onInputChange={(e) => this.inputEntered(e)}
/>
...