React调研表单移动端onClick={handleSubmit}失效求助

1. 确保表单元素包裹在<form>标签内 #

你的按钮设置了type="submit"，但现有代码未包含<form>容器。在移动端浏览器中，type="submit"按钮需要依托<form>标签才能触发标准提交逻辑，否则可能出现点击无响应的情况，同时e.preventDefault()也需要表单上下文才能生效。

修改代码：

<form onSubmit={handleSubmit}>
  <input
    type="file"
    accept="image/jpeg, image/png"
    name="billboard-image"
    id="billboard-image"
    onChange={handleImageChange}
  />

  <button type="submit" className="submitSurvey" disabled={!isValid}>
    Submit Survey
  </button>
</form>

同时移除按钮上的onClick绑定，改用表单的onSubmit事件触发提交逻辑。

2. 实时更新表单有效性状态 #

当前isValid是handleSubmit内部的临时变量，按钮的disabled={!isValid}依赖的状态无法实时同步用户操作，移动端可能因状态更新滞后导致按钮一直处于禁用状态。需要将isValid改为组件状态，在用户交互时实时计算更新：

import { useState, useEffect } from 'react';

const [isValid, setIsValid] = useState(false);

// 监听相关表单字段变化，实时更新有效性
useEffect(() => {
  let valid = true;
  if (shopOwnership === "yes") {
    valid = !!selectedImage && ratings !== undefined && ratings !== null && !!languages;
  } else {
    valid = !!languages && shopOwnership !== null && shopOwnership !== undefined;
  }
  setIsValid(valid);
}, [shopOwnership, selectedImage, ratings, languages]);

3. 完善异步请求的错误提示 #

移动端网络环境不稳定，storeSurvey或saveSurvey请求出错时，当前仅在控制台打印错误，用户无法感知，易误以为按钮无响应。需添加用户可见的错误提示：

try {
  const res = await saveSurvey({
    imgId: saveImg ? saveImg?.data?.data?.Id : null,
    language: languages,
    rating: (ratings ? ratings : -1) + 1,
    month: date.getMonth(),
    year: date.getFullYear(),
    customerId: id,
  });
  setRes(res);
} catch (error) {
  console.error("Error:", error);
  message.error("提交失败，请检查网络后重试"); // 添加用户可见提示
}

4. 避免事件绑定冲突 #

按钮同时设置onClick={handleSubmit}和type="submit"，在移动端浏览器可能触发重复事件导致逻辑混乱，保留表单onSubmit即可，移除按钮的onClick属性。

5. 确认File对象的正确性 #

确保selectedImage是标准的File对象，避免移动端选图后数据格式异常：

const handleImageChange = (e) => {
  const file = e.target.files?.[0];
  if (file) {
    setSelectedImage(file); // 存储原生File对象
  }
};

同时检查storeSurvey请求的Content-Type设置，确保自动使用multipart/form-data（多数请求库如Axios会自动处理，无需手动设置）。

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