当验证为false时，<Form.Control.Feedback></Form.Control.Feedback>不会显示

Question

发行：

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

复制步骤：

1. 当用户单击Send Verification Code按钮时，type={'submit'}按钮上的一个道具就会被触发。
2. onClick={(event) => sendVerificationCode(event)}传递事件，其中我使用event.preventDefault()和event.stopPropagation();来停止取消事件。
3. 在字段中没有输入任何内容的情况下，sendVerificationCode函数正确工作，只记录console.log('DO NOTHING');和console.log(validated);以进行测试。
4. 正在工作，并且是假的，但是为什么validated不显示。

ForgotPassword.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

如果您查看文档，regardless的逻辑是，它们实际上将Form的validated支柱设置为true，而不管输入是否有效。

根据验证的支柱定义

将表单标记为已验证。将其设置为true将切换窗体元素上的任何验证样式。

因此，要解决问题，只需从条件语句中取出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);

    ...