javascript - 自定义 Antd AutoComplete 以将 {children} 用于数据源和输入

Question

使用 {children} 方法时，我可以自定义 1) 数据源和 2) 输入吗？

文档说:

children (for customize input element)
customize input element
HTMLInputElement / HTMLTextAreaElement / React.ReactElement

children (for dataSource)
Data source for autocomplete
React.ReactElement / Array

我使用其中之一使其工作，但不能同时使用两者。真的很烦人，没有 renderOption 属性或类似的东西......

Answer 1

如果你想同时使用两者，你​​可以这样写:

const results = dataSource.map(x => (
  <Select.Option key={x} {/* props you want */}>{x}</Option>
))

<AutoComplete dataSource={results}>
  <Search placeholder="Search..." />
</AutoComplete>