Question

我目前遇到一个问题，我无法为创建的动态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]
    });

}

Answer 1

您应该能够像使用handleSearch一样采用与handleTypeAheadChange类似的方法：

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

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

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

无法在单页中添加多个AsyncTypeahead

1 个答案: