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

Question

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

标签： javascriptreactjsselectdrop-down-menumaterial-ui

Answer 1

您可以将 defaultValue 属性用于本机 Select 组件。

 // 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>

沙盒示例 URL