reactjs - React Bootstrap Forms : 在验证为 false 时不显示

Question

问题:

我正在实现一个表单并且很难理解为什么 React Bootstrap:<Form.Control.Feedback></Form.Control.Feedback>验证为假时不显示

重现步骤:

1. 当用户点击 Send Verification Code按钮，type={'submit'}按钮上的 Prop 并被触发。
2. onClick={(event) => sendVerificationCode(event)}通过事件，我使用 event.preventDefault()和 event.stopPropagation();停止取消事件。
3. 没有在字段中输入任何内容，sendVerificationCode功能正常工作，只记录 console.log('DO NOTHING');和 console.log(validated);用于测试。
4. validated正在工作并且是错误的，但为什么 没有显示。

忘记密码.tsx

// Page: Forgot Password
const ForgotPassword = () => {
  // React Hooks: State
  const [ email, setEmail ] = useState('');

  // React Hooks: Bootstrap
  const [ validated, setValidated ] = useState(false);

  // React Hooks: Refs
  const formRef: React.RefObject<HTMLFormElement> = useRef(null);

  // React Hooks: Redux
  const authError = useSelector((state: ReduxState) => state.authReducer.error);
  const dispatch = useDispatch();

  // React Hooks: React Router DOM
  let history = useHistory();

  // Send Verification Code
  const sendVerificationCode = (event: any) => {
    console.log('Component: sendVerificationCode working')

    // Event: Cancels Event (Stops HTML Default Form Submit)
    event.preventDefault();

    // Event: Prevents Event Bubbling To Parent Elements
    event.stopPropagation();

    // Check Form Validity
    if (formRef.current && formRef.current.checkValidity()) {
      // Validate Form
      setValidated(true);

      // Redux: Send Verification Code Request
      dispatch(sendVerificationCodeRequest(email, history));
    }
    else {
      // Do Nothing (Form.Control.Feedback Will Appear)
    }
  };

  return (
    <div>
      <NavigationBar />

      <Container id="forgot-password-container">
        <div id="forgot-password-inner-container">
          <div>
            <p id="forgot-password-title">Reset Password</p>
          </div>

          <Form ref={formRef} noValidate validated={validated}>
            <Form.Group controlId="forgot-password-email" className="form-group-container">
              <Form.Label className="form-field-title">Email</Form.Label>

              <Form.Control
                type={'email'}
                placeholder={'Email'}
                className="form-input"
                onChange={(event) => setEmail((event.target.value).toLowerCase())}
                value={email}
                maxLength={50}
                required
              />

              <Form.Control.Feedback type="invalid">Invalid email</Form.Control.Feedback>
            </Form.Group>

            <Button
              variant={'primary'}
              type={'submit'}
              id="login-button"
              onClick={(event) => sendVerificationCode(event)}
            >Send Verification Code</Button>
          </Form>

          <div id="login-sign-up-container">
            <p id="login-need-account-text">Need an account?</p>
            <button id="login-sign-up-button" type="button" onClick={() => history.push('sign-up')}>Sign Up</button>
          </div>
        </div>
      </Container>

      <Footer />
    </div>
  );
};

// Exports
export default ForgotPassword;

Answer 1

如果您查看 docs ，React Bootstrap 的逻辑是，无论输入是否有效，它们实际上都将 Form 的 validated 属性设置为 true。

根据prop definition of validated :

Mark a form as having been validated. Setting it to true will toggleany validation styles on the forms elements.

因此，要解决您的问题，只需从条件语句中取出 setValidated 并将其放在下面的某个位置，例如 event.stopPropagation()

const sendVerificationCode = (event: any) => {
    console.log('Component: sendVerificationCode working')

    // Event: Cancels Event (Stops HTML Default Form Submit)
    event.preventDefault();

    // Event: Prevents Event Bubbling To Parent Elements
    event.stopPropagation();

    setValidated(true);

    ...