3

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

描述 -

我正在尝试使用 Material UI Autocomplete 创建一个无限滚动，我正在使用 react-infinite-scroll-component附加链接作为参考

我实施的方式是：

因为我们需要将无限滚动附加到呈现列表项的 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" />
      )}
    />
4

1 回答 1

0 
 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 添加到选项的最后一个元素。只要最后一个选项在视口中可见，这将触发一个函数。也避免滚动问题

于 2021-08-20T08:44:34.690 回答