自定义Hook中表单字段事件处理器重新绑定失效问题排查

你的自定义Hook存在三个核心问题，导致提交后修改字段时handleChange看似不执行（或状态更新异常）：

1. 单字段判断逻辑错误 #

原handleChange仅对比当前修改字段与初始值的差异，忽略其他已修改字段。例如：修改字段A后fieldsChanged变为true，再将字段B改回初始值，fieldsChanged会被错误设为false，让你误以为handleChange未执行。

2. 初始值重置时序问题 #

在resetFieldsChanged中手动将initialValues.current = {}，会导致useEffect重新执行前initialValues为空，若此时修改字段，会触发错误的变更判断；同时手动修改ref不符合React状态更新的规范。

3. 未支持复选框/单选框 #

原代码仅处理字段的value属性，但复选框、单选框的实际状态由checked控制，这类字段的变更无法被正确检测。

修复后的完整代码 #

import { useRef, useEffect, useState, useCallback } from "react";

export default function useFormChangeDetector(formRef: React.RefObject<HTMLFormElement | null>) {
    const [fieldsChanged, setFieldsChanged] = useState(false);
    const [resetTrigger, setResetTrigger] = useState(false);
    const initialValues = useRef<{[key: string]: string}>({});

    const resetFieldsChanged = useCallback(() => {
        setFieldsChanged(false);
        setResetTrigger(prev => !prev);
        // 移除手动清空initialValues的操作，交给useEffect处理
    }, []);

    const handleChange = useCallback(() => {
        if (!formRef.current) return;
        
        const fields = formRef.current.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
            'input:not([type="submit"]):not([type="button"]), textarea, select'
        );

        let hasChanges = false;
        fields.forEach(field => {
            const initialValue = initialValues.current[field.name];
            if (!initialValue) return;

            if (field.type === 'checkbox' || field.type === 'radio') {
                // 处理复选框/单选框的选中状态
                hasChanges = hasChanges || (field.checked.toString() !== initialValue);
            } else {
                hasChanges = hasChanges || (field.value !== initialValue);
            }
        });

        setFieldsChanged(hasChanges);
    }, [formRef]);

    useEffect(() => {
        if (!formRef.current) return;

        const fields = formRef.current.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
            'input:not([type="submit"]):not([type="button"]), textarea, select'
        );

        // 存储初始值，包含复选框/单选框的状态
        fields.forEach(field => {
            if (field.type === 'checkbox' || field.type === 'radio') {
                initialValues.current[field.name] = field.checked.toString();
            } else {
                initialValues.current[field.name] = field.value;
            }
        });

        // 添加事件监听器
        fields.forEach(field => {
            field.addEventListener('input', handleChange);
        });

        // 清理函数
        return () => {
            fields.forEach(field => {
                field.removeEventListener('input', handleChange);
            });
        };
    }, [formRef, resetTrigger, handleChange]);

    return [fieldsChanged, resetFieldsChanged];
}

修复说明 #

1. 移除手动清空initialValues：让useEffect在resetTrigger变化时，自动重新获取当前表单字段的值作为新的初始值，避免时序问题。
2. 全局字段校验：每次字段变化时遍历所有表单字段，对比初始值，确保fieldsChanged能正确反映整个表单的变更状态。
3. 支持复选框/单选框：添加对这类字段checked状态的处理，确保变更能被正确检测。
4. 优化函数引用稳定性：用useCallback包裹resetFieldsChanged和handleChange，避免不必要的重渲染与监听器解绑异常。

修改后，提交表单调用resetFieldsChanged后，useEffect会重新绑定监听器并更新初始值，后续修改任何字段都会触发handleChange，并正确更新fieldsChanged状态。

内容的提问来源于stack exchange，提问作者VdfX89