删除上传图片时误触发store按钮的技术问题求助

核心原因 #

删除图片的按钮未指定type="button"，在表单内点击时会默认触发表单的提交事件，进而触发Formik的onSubmit逻辑（对应store/update接口调用）。

具体代码问题点 #

看编辑页面的删除按钮代码：

<button
   onClick={() => removeFileUpload(index)}
   className="outline-none border-none"
>
   <FaTimes className="text-red-600" />
</button>

HTML规范里，<button>标签如果不指定type属性，默认值是submit——只要它处于<form>标签内部，点击就会自动触发表单提交。这就是点击删除按钮时，意外触发store/update接口的直接原因。

另外补充：添加产品场景下的删除按钮函数removeFileUpload虽然接收了e参数，但代码里没有调用e.preventDefault()，如果对应的按钮同样是未指定type的<button>，也会出现相同问题。

修复方案 #

1. 给所有删除按钮明确添加type="button"属性，直接阻止默认的表单提交行为：

<button
   type="button"
   onClick={() => removeFileUpload(index)}
   className="outline-none border-none"
>
   <FaTimes className="text-red-600" />
</button>

2. 如果是添加产品场景的删除按钮，也可以在事件处理函数中添加e.preventDefault()来兜底：

const removeFileUpload = (e, index) => {
    e.preventDefault(); // 阻止默认表单提交行为
    const updatedFileUpload = [...fileUpload];
    updatedFileUpload.splice(index, 1);
    setFileUpload(updatedFileUpload);
    setData(name, updatedFileUpload);
};

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