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

Question

问题：获取双滚动条 - 删除纸张滚动条会使自动完成内容不可滚动，因此仅显示下拉列表可见高度中的内容。 如果我隐藏另一个滚动，则不会调用无限滚动 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" />
      )}
    />

Answer 1

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

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

Answer 2

您需要在 PaperComponent 中实现自己的列表并忽略 param 对象：

PaperComponent={
  (param) => {
    return <Paper id={paperId}>
      <InfiniteScroll
        dataLength={data.length}
        next={this.loadNext.bind(this)}
        hasMore={hasMorePages}
        loader={<h4 style={{ textAlign: 'center' }}>Loading ...</h4>}
        height={400}
      >
        <List>
          {data && data.map(value => <ListItem disablePadding>
            <ListItemButton onMouseDown={(event) => this.handleSelected(event, value)}>
              <ListItemText primary={value.name} />
            </ListItemButton>
          </ListItem>
          )}
          {data && data.length === 0 && <ListItem disablePadding>
            <ListItemButton disabled>
              <ListItemText primary="No items available" />
            </ListItemButton>
          </ListItem>}
        </List>
      </InfiniteScroll>
    </Paper>
  }
}

请务必使用 onMouseDown 事件处理程序而不是 onClick，否则选择项目将不起作用。