1

我正在尝试通过下拉菜单在 Next.js 中启用语言选择。如果链接没有嵌套在select标签内，它们工作正常。但是，一旦它们出现，它们就不再响应了。我假设这是因为缺少事件处理程序，我认为解决方案可能相当简单，但我无法让它工作。

如果有人可以看看这个会很棒。此外，我不是在寻找通过三元运算符在两种语言之间切换的解决方案，因为我想将逻辑用于具有两种以上语言的未来项目。对我来说，坚持select标签也很重要，因为这对于选择语言最有意义并提供更好的可访问性。

这是有效的✅</p> 

{router.locales.map((language) => (
  <Link
    href={router.asPath}
    locale={language}
    scroll={false}
    key={language}
  >
  <button type='button'>
    {language === 'en' ? 'EN' : language === 'de' ? 'DE' : null}
  </button>
  </Link>
))}

这不工作❌</p> 

<select name='languages' id='language-select'>
  {router.locales.map((language) => (
    <Link
      href={router.asPath}
      locale={language}
      scroll={false}
      key={language}
    >
      <option value={language}>
        {language === 'en'
          ? 'EN'
          : language === 'de'
          ? 'DE'
          : null}
      </option>
    </Link>
  ))}
</select>

非常感谢您花时间阅读本文并试图帮助我，我真的很感激！

4

1 回答 1

2

如果您绝对需要坚持使用select，而不是依赖于，next/link您应该听select'sonChange事件并触发路由更改next/router。

const SomePage = () => {
    const router = useRouter()

    const onSelectChange = (e) => {
        const locale = e.target.value;
        router.push(router.asPath, router.asPath, {
            locale,
            scroll: false 
        })
    }

    return (
        // ...
        <select name="languages" id="language-select" onChange={onSelectChange}>
            {router.locales.map((language) => (
                <option value={language}>
                    {language === "en" ? "EN" : language === "de" ? "DE" : null}
                </option>
            ))}
        </select>
        // ...
    )
}
于 2021-01-31T12:10:16.137 回答