javascript - 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>
    );
}

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

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

提前感谢您的任何帮助

标签： javascriptreactjsnext.js

Answer 1

为确保您的复选框处于正确状态，您只需使用选中的属性：

<input type="checkbox" 
  checked={myValue} 
  onChange={(e) => setMyValue(e.target.checked)} 
/>