转发到成功页面时出现重定向问题

Question

我有一个表格。但是当我将它转发到成功页面时，它并没有验证论坛并将其移动到成功页面，下面是我的代码。有人可以帮我吗？

下面是我的详细验证页面和成功页面，下面是我的路由

 <Link to="/success">
     <Button variant="primary" type="submit">
         Submit
     </Button>
  </Link>

Answer 1

您通常会在更改字段时（甚至在提交之前）或在提交时进行验证。如果是后者，您可以在表单的 onSubmit 函数中定义您的逻辑：

export default function Form() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // do your validation here
    // conditionally do what you want
    // for example navigate to other page: 
    // history.push("/success");
  }
  return (
      <Form onSubmit={handleSubmit}>
        ...
        <Button type="submit">Submit</Button>
      </Form>
  );
}

您不需要用 Link 包裹您的 Button。 type="submit" 的按钮自动调用表单的 onSubmit 函数。

编辑：我已经更正了您的沙箱，现在可以正常工作了：https://codesandbox.io/s/charming-curran-1hfe6j

我将表单的路由设置为“/”，因此它最初会在您加载应用程序时显示：

<Routes>
      <Route path="/" element={<MyForm />} />
      <Route path="/success" element={<Success />} />
    </Routes>

您的变量在 initialValues、field'name 和 validate 中的命名不同功能（名称<->用户名），我调整了它们

我已经使用 Form.Control.Feedback 在您的表单中呈现错误反馈并设置了 isInvalid 属性 Form.Control

<Form.Control
    ...
    isInvalid={!!formErrors.name}
/>

和

    <Form.Control.Feedback type="invalid">
    {formErrors.name}
</Form.Control.Feedback>

在您的 Form 组件上添加 noValidate 属性，以防止默认 HTML 验证

<Form onSubmit={handleSubmit} noValidate className="p-3">

验证在提交时执行，不需要复杂的 useEffect 挂钩

 const handleSubmit = (e) => {
    e.preventDefault();
    const errors = validate(formValues);
    setFormErrors(errors);
    console.log(!errors);
    if (Object.keys(errors).length === 0) {
      navigate("success");
    }
  };

转发到成功页面时出现重定向问题

Redirection problem while forward to sucess page

reactjs

react-bootstrap

bootstrap-4