有什么方法可以在第一个下拉菜单的特定位置显示 Select 菜单项吗？

Question

目前我在 Material ui 上有一组从 1900 年到 2021 年的菜单项（选项）。默认情况下，当我单击 select 按钮时，选项从 1900 开始。但我希望它从 1982 开始出现，但同时能够向上滚动到 1900 并向下滚动到 2021。有什么方法可以处理这个？任何帮助，将不胜感激。谢谢你。第一张图片是它的显示方式，第二张图片是我希望它显示的方式。

Answer 1

您可以为本机 Select 组件使用 defaultValue 属性。

 // To generate array for all options
 const arr = Array(2021 - 1900).fill().map((_, idx) => 1900 + idx);

 <Select defaultValue="1982">
      {arr.map((val) => (
        <MenuItem value={val} key={val}>
          {val}
        </MenuItem>
      ))}
 </Select>

对于受控组件，可以使用默认值来初始化状态。

  const [age, setAge] = React.useState(1982);
  const handleChange = (event) => {
     setAge(event.target.value);
  };
 
 // To generate array for all options
 const arr = Array(2021 - 1900).fill().map((_, idx) => 1900 + idx);

    <Select
      labelId="demo-controlled-open-select-label"
      id="demo-controlled-open-select"
      value={age}
      onChange={handleChange}
    >
      {arr.map((val) => (
        <MenuItem value={val} key={val}>
          {val}
        </MenuItem>
      ))}
    </Select>

Sandbox Example URL

有什么方法可以在第一个下拉菜单的特定位置显示 Select 菜单项吗？

Is there any way to show the Select MenuItems from specific position at first dropdown?

javascript

select

drop-down-menu

reactjs

material-ui