有没有办法在第一个下拉菜单中显示特定位置的 Select MenuItems？

【问题标题】：Is there any way to show the Select MenuItems from specific position at first dropdown?有没有办法在第一个下拉菜单中显示特定位置的 Select MenuItems？
【发布时间】：2021-08-01 11:15:44
【问题描述】：

目前我在 Material ui 上有一个从 1900 年到 2021 年的 MenuItems(options) 数组。默认情况下，当我单击选择按钮时，选项从 1900 年开始。但我希望它从 1982 年开始出现，但同时能够向上滚动到 1900 年并向下滚动到 2021 年。有什么办法可以处理这个问题吗？任何帮助，将不胜感激。谢谢你。第一张图是它的样子，第二张是我想要的样子。

【问题讨论】：

您是否尝试过在选择标签中使用selected 属性？

标签： javascript reactjs select drop-down-menu material-ui

【解决方案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

【讨论】：