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 组件的相同流程，它按预期工作。但似乎我们应该从这个转向功能组件，所以非常想解决这个问题而不是恢复到一个类！

预先感谢您的任何帮助

Answer 1

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

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

Answer 2

为了确保你的复选框状态正确，你可以使用checked属性：

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

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

2 个答案: