当使用TextField
组件作为Select
具有大型数据集(1000 项)的字段时,挂载/卸载列表时会出现明显的延迟。
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
const TextFieldSelect = () => {
const [value, setValue] = React.useState('');
return (
<TextField
select
onChange={newValue => setValue(newValue)}
value={value}
>
{listWith1000Items.map(item => (
<MenuItem key={index} value={index}>
`Item ${index + 1}`
</MenuItem>
)}
</TextField>
)
};
正如文档中所建议的那样,我正在使用react-window
有效地呈现大列表,但结果 - 我失去了能够选择列表项的功能。
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';
import { FixedSizeList } from 'react-window';
const Row = ({ index, style }) => (
<MenuItem key={index} value={index} style={style}>
`Item ${index + 1}`
</MenuItem>
)
const WindowTextFieldSelect = () => {
const [value, setValue] = React.useState('');
return (
<TextField
select
onChange={newValue => setValue(newValue)}
value={value}
>
<FixedSizedList
height={960}
width={480}
itemSize={48}
itemCount={1000}
>
{Row}
</FixedSizedList>
</TextField>
)
};
我希望当我选择一个项目时,值会更新。