在Next.js项目中为MUI Select组件添加上下切换选项功能

你可以通过状态管理结合数据源索引的方式实现切换按钮功能，具体步骤如下：

1. 用useState维护当前选中的currentUrl状态，同时给Select添加onChange事件同步手动选择的状态
2. 通过findIndex定位当前选中项在countriesData中的位置
3. 编写切换逻辑，判断当前索引的边界情况，更新选中的slug
4. 给按钮添加禁用状态，避免在边界（第一个/最后一个选项）时触发无效操作

完整代码示例：

import { useState } from 'react';
import { Select, MenuItem, Button, FormControl, FormHelperText } from '@mui/material';
import Link from 'next/link';
import { useRouter } from 'next/router'; // 需要自动跳转页面时导入

// 假设你的StyledFormControl是自定义封装的FormControl组件
const StyledFormControl = FormControl;

export default function ServerSelect({ countriesData }: { countriesData?: any[] }) {
  const router = useRouter();
  // 从当前路由初始化选中值，也可根据需求设置初始默认值
  const [currentUrl, setCurrentUrl] = useState(router.asPath.slice(1));

  // 获取当前选中项的索引，找不到时设为-1
  const currentIndex = countriesData?.findIndex(country => country?.attributes.Slug === currentUrl) ?? -1;

  // 切换至上一个选项
  const handlePrev = () => {
    if (!countriesData || currentIndex <= 0) return;
    const prevSlug = countriesData[currentIndex - 1].attributes.Slug;
    setCurrentUrl(prevSlug);
    // 需要自动跳转时取消下方注释
    // router.push(`/${prevSlug}`);
  };

  // 切换至下一个选项
  const handleNext = () => {
    if (!countriesData || currentIndex === -1 || currentIndex >= countriesData.length - 1) return;
    const nextSlug = countriesData[currentIndex + 1].attributes.Slug;
    setCurrentUrl(nextSlug);
    // 需要自动跳转时取消下方注释
    // router.push(`/${nextSlug}`);
  };

  return (
    <StyledFormControl>
      <Select
        value={currentUrl}
        defaultValue=''
        id='server-select'
        MenuProps={{ keepMounted: true, disablePortal: true }}
        sx={{ zIndex: 99 }}
        onChange={(e) => setCurrentUrl(e.target.value as string)}
      >
        {countriesData?.map((country: any) => (
          <MenuItem value={country?.attributes.Slug} key={country.id}>
            <Link href={country?.attributes?.Slug}>
              {country?.attributes.Country} - {country?.attributes.City}
            </Link>
          </MenuItem>
        ))}
      </Select>
      <Button 
        onClick={handlePrev} 
        disabled={currentIndex <= 0} 
        style={{ marginRight: 8, marginTop: 8 }}
      >
        PREV
      </Button>
      <Button 
        onClick={handleNext} 
        disabled={currentIndex === -1 || currentIndex >= (countriesData?.length || 0) - 1}
        style={{ marginTop: 8 }}
      >
        NEXT
      </Button>
      <FormHelperText>Select another VPS Server Location</FormHelperText>
    </StyledFormControl>
  );
}

关键说明： #

• 通过findIndex定位当前选中项的位置，以此判断是否允许切换上下选项
• 按钮的disabled属性会根据当前索引自动生效，避免无效操作
• 若需要切换选项时自动跳转页面，可使用Next.js的useRouter调用router.push完成路由跳转
• Select的onChange事件确保用户手动选择选项时，currentUrl状态能同步更新

内容的提问来源于stack exchange，提问作者Ilir