将TextField(或Select)与react-window一起使用时无法选择项目

时间:2019-09-05 06:26:45

标签: material-ui react-virtualized react-window

在将TextField component用作具有大量数据集(1000个项目)的Select字段时,安装/卸载列表时会有明显的延迟。

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>
  )
};

根据docs中的建议,我使用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>
  )
};

我希望当我选择一个项目时,值会更新。

0 个答案:

没有答案