如何更改按钮 Typescript / React 的值

Question

我有一个按钮来处理我的语言切换器，它被设置为处理 cookie、url 更改，现在我需要让它来更改我在页面上的翻译。 <img> 标签用于更改国家/地区标志。

                    <button
                        onClick={() => {
                        const locale =
                           router.locale === 'en-us'? 'da-dk': 'en-us';
                            setCookie(locale);
                            {handleOnclick;}
                     router.push(/${locale}`,
                                `/${locale}`,
                                {
                                 locale: false,
                                }); }} >
                        {router.locale === 'en-us' ? (
                            <img src={
                                    menuItems.data.body[5].items[0].image
                                        .url}/> ) : (
                            <img
                                src={
                                    menuItems.data.body[4].items[0].image
                                        .url
                                }/>)}
                    </button>

语言切换功能handleOnClick 工作正常（已测试）这是一个例子：

<button value="da" onClick={handleOnclick}>
    Danish
</button>
<button value="en" onClick={handleOnclick}>
    English
</button>

但现在我需要更改 onClick 的值，因为我只有一个按钮而不是 2 个，但我不知道该怎么做

Answer 1

您可以声明一个状态并根据之前的值切换其值。

const [language, setLanguage] = useState('en');

// if your project is written in typescript you can use below line of code
// const [language, setLanguage] = useState<'en' | 'da'>('en');

const handleOnclick = () => {
  setLanguage(prevState => (prevState === 'en' ? 'da' : 'en'));
  // it can also be written like this
  // setLanguage(language === 'en' ? 'da' : 'en');
  // But the 1st is more robust when the event happens more frequently.
};

然后这样写按钮

<button value={language} onClick={handleOnclick}>
  {language === 'en' ? 'English' : 'Danish'}
</button>