React-Bootstrap表单结合react-router-dom的校验与跳转问题

问题原因 #

你现在的代码把提交按钮包在了<Link>标签里，点击按钮时会直接触发路由跳转，完全跳过了表单的required校验和提交逻辑，所以必填项没填也会直接跳走。

修复方案 #

1. 删掉按钮外层的<Link>，让表单能正常触发提交事件
2. 用react-router-dom的useNavigate钩子替代<Link>实现跳转
3. 在表单的onSubmit事件里先做校验，通过后再跳转

修改后的完整代码 #

import { useNavigate } from 'react-router-dom';
import { Form, Row, Col, Button } from 'react-bootstrap';

const YourLoginComponent = () => {
  const navigate = useNavigate();
  // 保留你原有的handleOnChange、onSlasheyeClick、oneyeClick、eyeState等逻辑
  // ...

  const handleSubmit = (e) => {
    // 阻止表单默认提交行为，避免页面刷新
    e.preventDefault();
    
    // 获取表单元素，触发原生校验
    const form = e.currentTarget;
    if (form.checkValidity() === false) {
      // 校验不通过时，触发浏览器原生的必填项提示
      e.stopPropagation();
      return;
    }

    // 校验通过后，跳转到目标页面
    navigate('facebooklogin');
  };

  return (
    <Form onSubmit={handleSubmit} noValidate>
      <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}>
          <Button
            variant="primary"
            size="lg"
            className="login_button"
            type="submit"
            id="fblogin_button"
          >
            Login
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default YourLoginComponent;

关键说明 #

• 给<Form>添加onSubmit事件绑定handleSubmit，同时加上noValidate属性，让浏览器原生的校验提示正常显示
• 在handleSubmit里先调用form.checkValidity()做校验，不通过就终止流程，通过再调用navigate跳转
• 必须调用e.preventDefault()阻止表单默认的刷新行为，否则跳转前页面会刷新

内容的提问来源于stack exchange，提问作者P K Dhee Taal