Невозможно добавить несколько AsyncTypeahead на одной странице - PullRequest
Новая
       7

Невозможно добавить несколько AsyncTypeahead на одной странице

0 голосов
/ 28 апреля 2018

В настоящее время я сталкиваюсь с проблемой, когда я не могу назначить динамические параметры для созданного динамического AsyncTypeahead.

Как добавить параметры как динамические в отдельный список заголовков?

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

    Sample code:


    <AsyncTypeahead
                            labelKey="id"
                            **options={options}**
                            inputProps={{id:`${key}`}}
                            clearButton={true}
                            minLength={5}
                            isLoading={isLoading}
                            filterBy={filterByCallback}
                            onSearch={this.handleSearch}
                            placeholder="Search "
                            onChange={this.handleTypeAheadChange(key)}
                            renderMenuItemChildren={(option) => (
                                <div>
                                    {option.id} {option.name}
                                </div>
                            )}

                        />

     <AsyncTypeahead
                             labelKey="id"
                             **options={options1}**
                             inputProps={{id:`${key}`}}
                             clearButton={true}
                             minLength={5}
                             isLoading={isLoading}
                             filterBy={filterByCallback}
                             onSearch={this.handleSearch}
                             placeholder="Search "
                             onChange={this.handleTypeAheadChange(key)}
                             renderMenuItemChildren={(option) => (
                                 <div>
                                     {option.id} {option.name}
                                 </div>
                             )}

                        />


       <AsyncTypeahead
                               labelKey="id"
                               **options={options2}**
                               inputProps={{id:`${key}`}}
                               clearButton={true}
                               minLength={5}
                               isLoading={isLoading}
                               filterBy={filterByCallback}
                               onSearch={this.handleSearch}
                               placeholder="Search "
                               onChange={this.handleTypeAheadChange(key)}
                               renderMenuItemChildren={(option) => (
                                   <div>
                                       {option.id} {option.name}
                                   </div>
                               )}

                        />

/**/
 handleTypeAheadChange = name => values => {
    this.setState({
        [name]: values[0]
    });

}

1 Ответ

0 голосов
/ 30 апреля 2018

Вы должны быть в состоянии принять аналогичный подход с handleSearch, как вы делаете с handleTypeAheadChange: 

<AsyncTypeahead
  onSearch={this.handleSearch(key)}
  options={this.state[`options${key}`] || []}
  ...
/>

handleSearch = (key) => (query) => {
  /* Do async fetch... */

  this.setState({
    [`options${key}`]: results,
  });
}
...