无法使用React钩子解决电子邮件验证问题

Question

我是新来的反应和编程。我试图实现一个电子邮件验证使用这个平台。https://upmostly.com/tutorials/form-validation-using-custom-react-hooks.

期望结果：用户必须输入电子邮件，否则将在输入字段下方显示红色文本。如果您认为我应该使用其他库，如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

尝试将“提交”上的按钮更改为“单击”上的按钮？

除了一些未使用的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>