在react中加载带有自定义menuList的控件组件时，输入字段越来越短

问：

'const MenuList = useCallback（ 孩子。。。道具 }） => { if （props.selectProps.inputValue && ！props.options.length） { 返回 （ <div 样式={{ backgroundColor： '#fff'， 边框： '1px solid #fff'， 显示： 'flex'， flexWrap： '包裹'， justifyContent： '中心'， alignItems： '中心'， 宽度： '99.4%'， 高度： 300， fontSize： '1.2rem'， }} >

未找到公司

) } const listRef = useRef（null） const childrenArray = Children.toArray（children） 设 currentIndex = 0

使用效果（（） => { 如果 （searchValue.length > 0） { listRef？。当前？。scrollToItem（0） else if （（currentIndex + pageSize） * page < childrenArray.length && searchValue.length === 0） { 如果 （listRef.current） { listRef？。当前？。scrollToItem（（currentIndex + pageSize） * page） } } [当前索引]）

返回 （ <VirtualizedList listRef={（ref） => { listRef.current = 参考 }} 宽度={100} listStyle={{ width： '100%' }} items={children} 高度={300} hasNextPage={props.selectProps.hasNextPage} isNextPageLoading={props.selectProps.isNextPageLoading} loadNextPage={props.selectProps.loadNextPage} itemSize={props.selectProps.itemSize} > 索引，样式 }） => { 返回孩子[索引] ？( <div 样式={{ ...风格 backgroundColor： '#fff'， 边框： '1px solid #fff'， 显示： 'flex'， flexWrap： '包裹'， alignItems： '中心'， 宽度： '99.4%'， }} > {儿童[索引]} ) : ( <div 样式={{ ...风格 backgroundColor： '#fff'， 边框： '1px solid #fff'， 显示： 'flex'， flexWrap： '包裹'， justifyContent： '中心'， alignItems： '中心'， 宽度： '99.4%'， }} >

装载。。。

) }} ) }, [公司长度]， )

常量 customStyles = { 控制：（baseStyles，状态）=> { 返回 { ...baseStyles， 边境： fontSize： '.8rem ！important'， zIndex： ''， } }, 选项：（baseStyles，状态）=> { 返回 { ...baseStyles， } }, }1px solid #858585

返回 （ <Box position=“relative” sx={{ width： '300px' }}> <选择 isClearable={true} label={'选择公司'} 值={selectedCompany} onChange={handleSetSelectedCompany} options={searchValue.length > 0 ？ searchValueArray ： 公司} hasNextPage={searchValue.length > 0 ？ false ： hasMore} isNextPageLoading={searchValue.length > 0 ？ false ： isLoading} loadNextPage={loadMoreRows} itemSize={（） => 30} onInputChange={（e） => setSearchValue（e）} inputValue={searchValue} 组件={{ 控制： （props） => Control（props， '选择公司'， false）， 菜单列表、 }} /> ) }

虚拟化列表代码

import React from “react”; 从 “prop-types” 导入 PropTypes; import { VariableSizeList as List } from “react-window”; 从 “react-window-infinite-loader” 导入 InfiniteLoader;

函数 VirtualizedList（{ 孩子 hasNextPage， isNextPageLoading， 项目 loadNextPage， listStyle， itemSize、 高度 宽度 列表参考 }) { const itemCount = hasNextPage ？items.length + 1 ： items.length; const loadMoreItems = isNextPageLoading ？（） => 未定义：loadNextPage; const isItemLoaded = index => ！hasNextPage ||索引 < items.length;

返回 （ <无限加载器 data-testId=“无限加载器” isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems}

>

onItemsRendered， ref }） => { 返回 （ <列表 ref={currentRef => { 如果 （listRef） { listRef（当前参考）; } 引用（当前引用）; }} 宽度={宽度} 高度={高度} itemCount={itemCount} itemSize={itemSize} style={listStyle} onItemsRendered={onItemsRendered} className=“VirtualizedList-Component” > {listProps => children（listProps）} ); }} ); }

VirtualizedList.propTypes = { hasNextPage：PropTypes.bool， isNextPageLoading：PropTypes.bool， 项目：PropTypes.array、 loadMoreItems：PropTypes.func、 listStyle：PropTypes.object， itemSize：PropTypes.func， 高度：PropTypes.number， 宽度：PropTypes.number， 列表引用：PropTypes.func， children：PropTypes.any， loadNextPage：PropTypes.any， };根据我的知识，我尝试了一切......但是这里发生了什么......不知何故，当我加载 Control 组件以及自定义 MenuList 属性时......它阻止了默认输入字段的缩小，因此我的搜索值状态一次只更新了 1 个字符。如果要键入另一个字符，我必须再次指向光标，并且此循环正在重复。任何形式的帮助和建议将不胜感激。先谢谢你。