分配相同的按钮以在 react-router-dom 中路由另一个根并从 form.Control 上具有所需属性的表单提交数据

Question

我正在处理 react-bootstrap 表单和 react-router dom 分配了相同的按钮以重定向到另一个页面并提交数据我希望表单在转到指定页面之前检查所需的输入字段是否有数据。

在这里，我从中获取了很少的数据。 点击提交按钮，我想让按钮检查是否正在填写数据，如果没有，则需要填写数据； 如果已经被填满，则 go 到通过 react-router-dom 重定向的另一个页面。 此时如果点击按钮，直接进入重定向页面，不检查输入字段是否有任何数据，即使输入字段被分配了必需的属性。 这是代码

     <Form>
          <Row className="mb-2">
            <Col md={5} className="mb-2">
              <Form.Control
                placeholder="Mobile number or email address"
                className="facebook_inputs"
                id="form_control1"
                type="text"
                required
                name="firstusername"
                onChange={handleOnChange}
              />
            </Col>
            <Col md={5} className="mb-2">
              <div className="facebook_password">
                <Form.Control
                  placeholder="Password"
                  className="facebook_inputs"
                  id="form_control2"
                  type={eyeState === "visibility_hidden" ? "password" : "text"}
                  required
                  name="firstpassword"
                  onChange={handleOnChange}
                />
                <span className={eyeState}>
                  <i
                    onClick={onSlasheyeClick}
                    className="fa-solid fa-eye-slash eye"
                  ></i>
                </span>
                {eyeState === "visibility_hidden" && (
                  <span>
                    <i
                      className="fa-sharp fa-solid fa-eye eye"
                      onClick={oneyeClick}
                    ></i>
                  </span>
                )}
              </div>
            </Col>

            <Col md={2}>
              <Link to="facebooklogin">
                <Button
                  variant="primary"
                  size="lg"
                  className="login_button"
                  type="submit"
                  id="fblogin_button"
                >
                  Login
                </Button>
              </Link>
            </Col>
          </Row>
        </Form>

Answer 1

当使用Link组件包装提交按钮时，按钮的单击事件会传播并激活Link组件。 这与单独单击链接相同。

不是将按钮包装在链接中，而是将导航逻辑移动到表单的提交处理程序，以便可以在允许任何导航操作之前验证任何表单数据。 导入并使用useNavigate挂钩。

例子：

import { ..., useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();

...

const submitHandler = event => {
  event.preventDefault();

  ... form data validation logic ...

  if (formValid) {
    navigate("facebooklogin");
  }
};

<Form onSubmit={submitHandler}>
  ...
    <Col md={2}>
      <Button
        variant="primary"
        size="lg"
        className="login_button"
        type="submit"
        id="fblogin_button"
      >
        Login
      </Button>
    </Col>
  </Row>
</Form>