切换 i18n 语言的按钮

Question

我的代码在反应中并使用 i18next 库。这是以前用 material 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 和 none 似乎给了我参数 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

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

切换 i18n 语言的按钮

button to switch i18n language

javascript

button

i18next

reactjs