切换 i18n 语言的按钮

Question

my code is in react and uses the i18next library. this was previously done with material ui's Select API, where i was able to switch languages using the value , onChange , and inputProps parameters. however, the design has since changed to be two separate buttons (eg. 'en' and 'zh') instead of the switch. this is the code that successfully toggles between two languages with the Select API (language toggling = dropdown menu):

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>
        </>
    )
}

I've looked at the ButtonGroup API and the Button API and none of them seem to give me the parameters the Select API offers. I'm looking into using the native button in HTML, but i still need to pass in the values.language context before calling value={'en'} and value={'zh-Hant'} and i'm not sure how i can achieve that. i've also tried the code below, which doesn't work:

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

thanks!

Answer 1

You can give your button some attributes and you can access them with the help of those attributes.

Something like

<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>

In you handleChange funtion you can get element through 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
}

I also had example for you created you can check for reference.

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

I hope this will solve your problem. Let me know if it works.