是否有一种方法可以添加一个加载器组件到Material ui Autocomplete组件

Question

我试图实现一个无限滚动到我的自动完成组件，它看起来像这样

const SearchSelect: React.FC<SearchSelectProps> = (props) => {
return (
<Autocomplete
{...props}
ListboxProps={{
onScroll: (event: React.SyntheticEvent) => {
const listboxNode = event.currentTarget
if (
listboxNode.scrollTop + listboxNode.clientHeight ===
listboxNode.scrollHeight
) {
props.loadmoreresults && props.loadmoreresults()
}
},
}}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
variant="filled"
/>
)}
/>
)
}
export default withStyles(styles)(SearchSelect)

我想在每次滚动到列表底部时在列表末尾添加一个加载器组件。如果这是不可能的，至少添加一个文本"loading";最后。你会怎么做?

Thanks in advance

Answer 1

我终于找到了如何使用renderOption道具，如下所示:

renderOption={(option: any) => {
if (option === props.options[props.options.length - 1] && props.hasNextPage) {
return (
<div>
{option.label}
<Loader />
</div>
)
}
return option.label
}}

编辑:这将添加一个加载器到最后一个项目，它不会从最后一个选项分开，所以它可能不适合你，如果你想在列表下添加一个额外的组件。为此，您可以创建自定义Paper组件，并通过PaperComponentprop:

添加它。

function CustomPaper({ children, ...others }) {
return (
<Paper variant="outlined" {...others}>
{children}
<Loader />
</Paper>
)
}