如何通过钩子编写 onChange 事件？答案

【问题标题】：How to write an onChange event through hooks?如何通过钩子编写 onChange 事件？
【发布时间】：2021-02-14 00:19:56
【问题描述】：

我想通过 Hooks 注册事件 onChange

const { i18n } = useTranslation();
const [locale, setLocale] = useState('en')
const handleChange = (lang) => {
    setLocale(lang)
    i18n.changeLanguage(lang);
}

尝试使用 select，但最终选择了 Switch

``return (
    <div className={styles.wrapper}>
        <div className={styles.switchBorder}>
           <Switch className={styles.switch} checkedChildren="EN" unCheckedChildren="RU"
                checked={locale} onChange={(e) => handleChange(e.target.checked)}
            />
        </div>
    </div>
)``

【问题讨论】：

标签： reactjs switch-statement react-hooks onchange i18next

【解决方案1】：

const handleChange = ({currentTarget}) => {
const {checked: lang} = currentTarget;
setLocale(lang)
i18n.changeLanguage(lang);}

onChange={handleChange}

【讨论】：

虽然此代码可能会解决问题，including an explanation 关于如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。
某些东西不起作用，出现错误“TypeError: Cannot destructure property 'checked' of 'currentTarget' as it is undefined.”
也许可以尝试 thisconst handleChange = ({target}) => { const {value: lang} = target; 并把 value 属性改为 checked 在组件 <Switch className={styles.switch} checkedChildren="EN" unCheckedChildren="RU" value={locale} onChange={(e) => handleChange(e.target.checked)}

【解决方案2】：

  const handleChange = () => {
    if (locale === 'en') {
        setLocale('ru');
        i18n.changeLanguage( 'ru');
    } else {
        setLocale('en');
        i18n.changeLanguage( 'en');
    }
};

【讨论】：