Material UI 自动完成 + 无限滚动在一起？

Posted 2023-02-22

【中文标题】Material UI 自动完成 + 无限滚动在一起？

【英文标题】：Material UI Autocomplete + Infinite Scrolling together?

【发布时间】：2021-05-31 08:01:40

【问题描述】：

问题：获取双滚动条 - 移除纸质滚动条使自动完成内容不可滚动，因此仅显示下拉可见高度中的内容。 如果我隐藏另一个滚动，则不会调用 Infinite Scroll API。我怎样才能让它工作：

描述-

我正在尝试使用 Material UI Autocomplete 创建一个无限滚动，为此我正在使用 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" />
      )
    />

【问题讨论】：

你找到解决这个问题的方法了吗？

【参考方案1】：

 const observer=useRef();
 
 const lastOptionElementRef=useCallback((node)=>
        if (observer.current) observer.current.disconnect();
        observer.current=new IntersectionObserver(async (enteries)=>
          if (enteries[0].isIntersecting &&props.hasMore) 
            setPageNumber((pageNumber)=>pageNumber+1);
          
          );
          if (node)observer.current.observe(node);
      , [props.loader]);

您可以使用 render option 属性将此 lastOptionElementRef 添加到选项的最后一个元素。只要最后一个选项在视口中可见，这将触发一个函数。还要避免滚动问题