按钮在桌面浏览器中完美提交，但不会在移动浏览器中提交答案

【问题标题】：Button submits perfectly in desktop browsers but won't submit in mobile browsers按钮在桌面浏览器中完美提交，但不会在移动浏览器中提交
【发布时间】：2023-01-14 19:07:46
【问题描述】：

我在 React 组件中有一个登录按钮，它在桌面浏览器中运行良好，但在移动设备上运行不佳。我发现很难调试。

这是表格。

 <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);
    }
  };

非常感谢任何帮助

该按钮调用后端 api 并检查信用。然后登录用户。它只是不会在移动设备上工作。

我在 Safari、Chrome 和 Firefox 上测试过

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

如果您使用的是响应式 CSS，请检查其他一些 div 元素是否与移动设备中的按钮重叠。有时问题出在 div 元素的样式中。

【讨论】：