React登录按钮桌面端正常，移动端无法提交问题求助

我的React登录表单在桌面端浏览器能正常提交，但在Safari、Chrome、Firefox移动端完全无法触发提交逻辑，相关代码如下：

表单代码 #

<form className="signin_form" onSubmit={onLogin}>
  <label className="sr-only" htmlFor="email"></label>
  <input
    onChange={(e) => {
      setEmail(e.target.value);
    }}
    className="form_input"
    type="text"
    name="email"
    placeholder="Email"
    autoFocus
  />

  <label className="sr-only" htmlFor="password"></label>
  <input
    onChange={(e) => {
      setPassword(e.target.value);
    }}
    className="form_input"
    type="password"
    name="password"
    placeholder="Password"
  />
  {error && (
    <p className="error error_message">
      Username or password is incorrect
    </p>
  )}
  <button type="submit" className="btn btn_primary">
    Sign In
  </button>
</form>

提交函数代码 #

const onLogin = async (e) => {
  e.preventDefault();
  try {
    const result = await axios.post(`${url}/login`, {
      email,
      password,
    });

    dispatch({ type: SET_TOKEN, payload: result.data.token });

    if (result.data.status === 1) {
      const newData = await axios.get(`${url}/syncStore`, {
        headers: { token: result.data.token },
      });

      dispatch({
        type: UPDATE_STORE,
        payload: newData.data,
      });

      navigate("/dashboard");
    } else {
      showError();
    }
  } catch (error) {
    console.log(error);
  }
};

以下是针对移动端问题的排查和修复方案：

• 确认按钮触摸区域有效性
  检查按钮是否被其他元素遮挡，或者CSS的pointer-events属性被设置为none。可以临时给按钮添加background: red;样式，直观确认触摸点击的区域是否覆盖按钮。

• 添加onClick兜底触发
  部分移动端浏览器对表单submit事件的触发存在兼容问题，给按钮额外绑定onClick事件来确保提交逻辑被执行：

  <button type="submit" className="btn btn_primary" onClick={onLogin}>
    Sign In
  </button>
  

  为避免重复提交，建议给函数添加提交状态锁：

  const [isSubmitting, setIsSubmitting] = useState(false);
  const onLogin = async (e) => {
    if (isSubmitting) return;
    setIsSubmitting(true);
    e.preventDefault();
    try {
      // 原有登录逻辑
    } catch (error) {
      console.log(error);
    } finally {
      setIsSubmitting(false);
    }
  };
  

• 补全表单元素的语义化属性
  移动端浏览器对表单语义化要求更高，给input元素添加对应的id属性，和label的for属性匹配：

  <label className="sr-only" htmlFor="email">Email</label>
  <input
    onChange={(e) => setEmail(e.target.value)}
    className="form_input"
    type="text"
    id="email"
    name="email"
    placeholder="Email"
    autoFocus
  />
  
  <label className="sr-only" htmlFor="password">Password</label>
  <input
    onChange={(e) => setPassword(e.target.value)}
    className="form_input"
    type="password"
    id="password"
    name="password"
    placeholder="Password"
  />
  

• 排查上层元素的事件阻止逻辑
  检查表单的父元素是否绑定了touchstart、touchend等触摸事件，并调用了e.preventDefault()，这会阻止表单submit事件的触发。可以在onLogin函数开头添加console.log('submit triggered')，如果没有输出，说明事件未触发，需要逐层排查上层元素的事件处理。

• 适配Safari移动端的容器限制
  Safari移动端要求表单元素不能被overflow: hidden的容器完全包裹，或者需要处于可滚动区域内。可以尝试给表单所在的容器添加overflow-y: auto; min-height: 100vh;样式测试。

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