無法使用 React Hooks 解決 Email 驗證

Question

我是反應和編程的新手。 我正在嘗試使用此平台實現 email 驗證。 https://upmostly.com/tutorials/form-validation-using-custom-react-hooks 。

期望結果：用戶必須輸入 email，否則會在輸入框下方顯示紅色文本。 如果您認為我應該使用其他庫，例如 react-hook-forms，請告訴我

請在下面查看我的工作。 先感謝您。

不工作：我仍然點擊提交，消息（電子郵件無效）沒有出現

This is the step where the email should be validated
const Step3 = (props) => {
  const [values, setValues] = useState({});
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    handleChange,
    handleSubmit,
  } = useForm(validate);

  useEffect(() => {
    if (Object.keys(errors).length === 0 && isSubmitting) {
    }
  }, [errors]);

  const onChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };  
  const onSubmit = (event) => {
    if (event) event.preventDefault();
    setErrors(validate(values));
    setIsSubmitting(true);
  };
  return (
    <WizardStep>
      <WizardProgress className="text-primary">
        Question {props.currentStep}/{props.totalSteps}
      </WizardProgress>
      <StepTitle>What is your email address?</StepTitle>
      <WizardFormWrapper>
        <WizardFormGroup controlId="userEmailGroup">
          <StyledTextInput
            type="email"
            autoComplete="off"
            className={`input ${errors.email && 'is-danger'}`}
            name="email"
            label="Email"
            placeholder="Email"
            onChange={onChange}
            value={values.email}
            required
          />
          {errors.email && (
                    <p className="help is-danger">{errors.email}</p>
                  )}
        </WizardFormGroup>
      </WizardFormWrapper>
      <WizardButtonGroup>
        <Link to="/feed">
          <SubmitButton primary="true" onSubmit={onSubmit}>
            Submit
          </SubmitButton>
        </Link>
      </WizardButtonGroup>
    </WizardStep>
  );
};



This is the validation method 
export default function validate(values) {
  let errors = {};
  if (!values.email) {
    errors.email = 'Email address is required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Email address is invalid';
  }
  if (!values.password) {
    errors.password = 'Password is required';
  } else if (values.password.length < 8) {
    errors.password = 'Password must be 8 or more characters';
  }
  return errors;
};

Answer 1

嘗試將您的按鈕onSubmit更改為onClick ？

除了一些未使用的useForm變量之外，代碼似乎還不錯。 這是一個簡化版本，沒有額外的組件等。 我沒有更改任何主要功能：

 const { useState, useEffect } = React const Step3 = (props) => { const [values, setValues] = useState({ email: '', }); const [errors, setErrors] = useState({}); const [isSubmitting, setIsSubmitting] = useState(false); // const { // handleChange, // handleSubmit, // } = useForm(validate); useEffect(() => { if (Object.keys(errors).length === 0 && isSubmitting) {} }, [errors]); const onChange = (event) => { event.persist(); setValues(values => ({...values, [event.target.name]: event.target.value })); }; const onSubmit = (event) => { if (event) event.preventDefault(); setErrors(validate(values)); setIsSubmitting(true); }; return ( <div> <input type = "email" autoComplete = "off" className = "none" name = "email" label = "Email" placeholder = "Email" onChange = { onChange } value = {values.email} required /> { errors.email && ( <p className = "help is-danger">{errors.email}</p> ) } <button type="submit" onClick={onSubmit}>Submit</button> </div> ); }; function validate(values) { let errors = {}; if (.values.email) { errors;email = 'Email address is required'. } else if (./\S+@\S+\.\S+/.test(values;email)) { errors.email = 'Email address is invalid'. } if (;values.password) { errors.password = 'Password is required'. } else if (values;password;length < 8) { errors;password = 'Password must be 8 or more characters'. } return errors, }. ReactDOM.render( < Step3 / > , document.getElementById("main"))

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <main id="main"></main>