切换i18n语言的按钮

Question

我的代码在 react 中并使用 i18next 库。这之前是使用材料 ui 的 Select API 完成的，我可以使用 value、onChange 和 inputProps 参数切换语言。然而，该设计后来变成了两个独立的按钮（例如“en”和“zh”），而不是开关。这是使用Select API（语言切换=下拉菜单）在两种语言之间成功切换的代码：

const LanguageMenu = () => {
    const { t, i18n } = useTranslation()
    const classes = useStyles()

    const [values, setValues] = useState({
        language: i18next.language
    })

    function handleChange(event) {
        i18n.changeLanguage(event.target.value)

        setValues(oldValues => ({
            ...oldValues,
            [event.target.name]: event.target.value,
        }))
    }

    return(
        <>
            <Select
    value={values.language}
    onChange={(event) => handleChange(event)}
    disableUnderline
    inputProps={{
        name: 'language'
    }}
    classes={{
        select: classes.selectFocus
    }}
>
        

<MenuItem value={'en'}><p role="img" aria-label="en">????????</p></MenuItem>
<MenuItem value={'zh-Hant'}><p role="img" aria-label="zh">????????</p></MenuItem>
</Select>
        </>
    )
}

我查看了ButtonGroup API 和Button API，但它们似乎都没有给我Select API 提供的参数。我正在考虑在 HTML 中使用本机 button，但我仍然需要在调用 value={'en'} 和 value={'zh-Hant'} 之前传入 values.language 上下文，我不确定如何实现这一点。我也试过下面的代码，但不起作用：

<button onChange={(e) => handleChange(e)}>En</button>
<button onChange={(e) => handleChange(e)}>Zh</button>

谢谢！

Answer 1

你可以给你的按钮一些属性，你可以在这些属性的帮助下访问它们。

类似

<button id="EN" value="EN" name="EN" onChange={(event) => handleChange(event)}>En</button>
<button id="ZH" value="ZH" name="ZH" onChange={(event) => handleChange(event)}>Zh</button>

在你的handleChange函数中你可以通过ID获取元素。

function handleChange(e:any){
    var x = document.getElementById(e.target.id).value;
    //Use x in your code as per requirement

// x will have the value of your button you canget whatever you want value,name etc
}

我还为您创建了示例，您可以查看以供参考。

https://www.w3schools.com/code/tryit.asp?filename=GRZ6X9IAGG39

我希望这能解决您的问题。让我知道它是否有效。