React+Redux表单onSubmit事件不触发问题求助

核心原因 #

你在提交按钮的onClick事件中调用了e.preventDefault()，这直接阻断了浏览器的表单默认提交流程——当点击type="submit"的按钮时，浏览器会先触发按钮的onClick，若在此处调用preventDefault，后续的<form>的onSubmit事件就完全不会触发。

解决方案 #

方案一：移除冗余的onClick事件（推荐）

这个按钮的唯一作用就是提交表单创建客户，不需要单独的onClick逻辑，直接在onSubmit中处理业务即可：

// 删除原有的onClick函数
const onSubmit = e => {
    e.preventDefault();
    console.log('表单提交触发');
    // 直接调用创建客户的方法
    createCustomer(customer_name);
    initialCreate();
}

// 按钮组件移除onClick属性
<button 
    type="submit" 
    name="create"
    className="btn btn-primary"
>Create</button>

方案二：保留onClick但移除preventDefault

如果确实需要保留按钮的onClick逻辑，必须删除其中的e.preventDefault()：

const onClick = e => {
    // 移除e.preventDefault()
    setActionType(e.target.name)
    // 注意：setState是异步的，这里console.log的是旧值，如需查看新值可加useEffect监听
};

额外代码优化建议 #

1. 简化初始化逻辑：原有的effectRan状态完全没必要，用空依赖的useEffect就能实现组件挂载时只执行一次初始化：

useEffect(() => {
    initialCreate()
}, []) // 空依赖数组，仅在组件首次挂载时执行

2. 移除无用函数：returnNull函数没有实际作用，可直接删除，原三元表达式可简化为：

// 原代码：actionType === 'create' ? createCustomer(customer_name) : returnNull();
// 简化后：
if(actionType === 'create') createCustomer(customer_name)

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