React - 输入复选框 onchange 不会第一次触发

Question

复选框输入的行为不是很可靠。

我正在根据商店的状态设置复选框的状态。这很好用。然而，有时选中该复选框不会触发onchange. 第二次选中该框将会触发，但是 UI 将显示错误的状态，因为第一次失败。

我正在使用 NextJS。这通常发生在第一次加载页面或硬刷新时。

import { useDispatch, useSelector } from 'react-redux';
import _cloneDeep from 'lodash/cloneDeep';

export default function Privacy() {
    const consentObj = useSelector((state) => state.cookieOptions);
    const dispatch = useDispatch();

    const analyticsConsent = useSelector(
        (state) => state.cookieOptions.analytics
    );

    function toggleConsentAnalytics() {
        // this function will not fire on first input onchange
        const newSettings = _cloneDeep(consentObj);
        newSettings.analytics = !consentObj.analytics;

        dispatch({ type: 'SET_COOKIE_OPTIONS', payload: newSettings });
    }

    return (
        <div>
            <div className={css.settingContainer}>
                <strong>Analytics cookie</strong>
                <label>
                    <div className={css.switchWrap}>
                        {analyticsConsent ? 'On' : 'Off'}
                        <span className={css.switch}>
                            <input
                                defaultChecked={analyticsConsent}
                                onChange={() => toggleConsentAnalytics()}
                                type="checkbox"
                            />
                            <span className={css.slider}></span>
                        </span>
                    </div>
                </label>
            </div>
        </div>
    );
}

我已经从示例中删除了我认为不相关的代码。

我使用类组件有一个相同的流程，并且它按预期工作。但看来我们应该从这个转向功能组件，所以非常想解决这个问题而不是恢复到类！

预先感谢您的任何帮助

Answer 1

您可以使用onClick代替onChange，它会正常工作。

这与react无关，而是与onchange事件在html中的工作方式有关。