Ant Design Form 在 React 中使用错误的凭据提交时重新加载页面

Question

我在 React 应用程序中使用 Ant Design 的 Form 组件来实现登录功能。当用户使用错误的凭据提交表单时，整个页面都会重新加载，这不是我期望的行为。

// ... [import statements]

const Login: React.FC = () => {
  // ... [useState, useContext, etc.]

  const onSubmit = (values: LoginValues) => {
    loginMutation.mutate(values, {
      onError: handleLoginFailure,
      onSuccess: handleLoginSuccess,
    });
  };

  return (
    <div className="loginContainer">
      // ... [some more JSX]
      <Form<LoginValues>
        name="loginForm"
        form={form}
        onFinish={onSubmit}
        initialValues={{
          remember: false,
        }}
      >
        // ... [Form Items]
        <Form.Item>
          <Button
            type="primary"
            size="large"
            htmlType="submit"
            loading={loginMutation.isLoading}
          >
            Login
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;

我在这里缺少什么？当使用错误的凭据提交表单时，如何防止页面重新加载？

Answer 1

像这样删除表单属性。