如何将导航按钮添加到选择组件 (MUI)

Question

所以我有来自 MUI 的这个

Select

组件，它可以正常工作。从列表中选择一个项目后，路由器将推送到该位置：

这是代码：

export default function SelectLocation({
  countriesData,
  currentUrl,
  formColor,
}: any) {
  const router = useRouter();

  const handelChange = (e: any) => {
    router.push(e.target.value);
  };

  return (
    //@ts-ignore

    <StyledFormControl formColor={formColor}>
      <Select
        value={countriesData ? currentUrl : "loading"}
        id='server-select'
        onChange={handelChange}
      >
        {countriesData ? (
          countriesData.map((country: any) => {
            return (
              <MenuItem value={country?.attributes.Slug} key={country.id}>
                {country.attributes.Country} - {country.attributes.City}
              </MenuItem>
            );
          })
        ) : (
          <MenuItem value='loading'>Loading...</MenuItem>
        )}
      </Select>
      <FormHelperText>Select another server location</FormHelperText>
    </StyledFormControl>
  );
}

我想要的是添加两个导航按钮（上一个，下一个），它们相应地导航到列表中的下一个/上一个项目。

如果有任何想法可以帮助我找到解决方案，我将不胜感激。

Answer 1

如果您创建正在使用的选项数组，然后将其映射到 select 中，并且当 onChange 触发器将索引值设置为您选择的值，那么当您单击 next 然后将索引递增 1 时，这可以轻松完成以前的反之亦然