如何解决Material UI 自动完成 + 无限滚动在一起?
问题:获得双滚动条 - 删除纸滚动条使自动完成内容不可滚动,因此仅显示下拉可见高度的内容。 如果我隐藏另一个滚动,则不会调用 Infinite Scroll API。我怎样才能让它工作:
说明 -
我正在尝试创建一个带有 Material UI 自动完成功能的无限滚动,为此我正在使用 react-infinite-scroll-component attached link for reference
我实现的方式是:
因为我们需要将 Infinite Scroll 附加到呈现列表项的 Popper;因此我编写了我的自定义 PAPER 组件(根据文档,它负责呈现下拉列表中的项目) PaperComponent={myCustomComponent}
我的 InfiniteScrollAutoComplete 定义附在下面:
<Autocomplete
options={list.data && list.data !== null ? list.data : []}
getoptionLabel={(option) => option.name}
PaperComponent={(param) => (
<InfiniteScroll
height={200}
dataLength={list.total}
next={this.handleFetchNext.bind(this)}
hasMore={list.data.length < list.total ? true : false}
loader={
<p style={{ textAlign: "center",backgroundColor: "#f9dc01" }}>
<b>Loading...</b>
</p>
}
endMessage={
<p style={{ textAlign: "center",backgroundColor: "#f9dc01" }}>
<b>Yay! You have seen it all</b>
</p>
}
>
<Paper {...param} />
</InfiniteScroll>
)}
renderInput={(params) => (
<TextField {...params} label="" variant="outlined" />
)}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。