React表单提交时状态未保存问题的解决请求

核心问题点 #

1. 按钮事件绑定错误：button元素本身没有onSubmit事件，你给按钮绑定的onSubmit不会触发，导致你写的event.preventDefault()根本没生效。
2. 表单默认提交行为未阻止：按钮type="submit"会触发父级<form>的默认提交（页面刷新），这就是状态重置为初始值的根本原因。
3. 状态更新逻辑潜在问题：如果父组件的handleChildStateChange没有正确以不可变方式更新状态，也可能导致状态异常。

具体修复步骤 #

1. 修正提交按钮组件代码

把按钮的onSubmit换成onClick，同时可选将按钮type改为button（彻底避免触发表单默认提交）：

export const SubmitButton: React.FC = (props: LooseObject) => {
    const { content, elementId, onSubmit, isDisabled } = props

    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        // 若按钮在form内，这里的preventDefault仅阻止按钮自身默认行为，仍需处理form的默认提交
        event.preventDefault();
        onSubmit();
    }

    return (
        <button
            id={elementId}
            type="button" {/* 改为button，完全避免触发表单默认提交 */}
            className="bg-yellow-500 hover:bg-yellow-700 text-white p-2 rounded-md mt-7 disabled:opacity-50"
            disabled={isDisabled()}
            onClick={handleClick} {/* 替换为button支持的onClick事件 */}
        >
            {content}
        </button>
    )
}

2. 处理父组件表单的默认提交行为

如果你的提交按钮嵌套在<form>标签内，必须在form层面阻止默认提交：

// 父组件中包裹动态组件的form标签
<form 
    onSubmit={(e) => {
        e.preventDefault(); // 阻止页面刷新
        handleSubmit();
    }}
>
    <Component 
        {...item }
        onStateChange={(childState: any) => handleChildStateChange(childState, elementId)}
        onValidationChange={setIsFormValid}
        onError={(errorState: boolean) => handleErrors(errorState, elementId)}
        isDisabled={() => hasErrors()}
        onSubmit={handleSubmit}
    />
</form>

3. 确保父组件状态更新逻辑正确

检查handleChildStateChange是否以不可变方式更新状态，避免状态覆盖：

const handleChildStateChange = (childState: any, elementId: string) => {
    // 用扩展运算符或immer等工具，保证状态不可变更新
    setParentState(prevState => ({
        ...prevState,
        // 根据elementId对应更新状态字段
        [elementId]: childState
    }));
}

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