Question

当您没有填写任何形式的输入时，我在这里https://codesandbox.io/s/old-mountain-xl7nz制作了一个sandBox，我希望看到3个错误，但我只会得到一个错误。我不明白为什么

import React, { ChangeEvent, useState } from 'react';
import { Link } from 'react-router-dom';
import loadingImg from '../images/loading.svg';

const Join: React.FC = () => {
  const [state, setState] = useState({
    email: '',
    emailError: '',
    fullName: '',
    fullNameError: '',
    loading: false,
    password: '',
    passwordError: '',
  });
  const {
    email,
    emailError,
    fullName,
    fullNameError,
    password,
    passwordError,
  } = state;

  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
    event.persist();
    setState((prev) => ({
      ...prev,
      [event.target.id]: event.target.value,
    }));
  };
  const onSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    if (validate('fullName') && validate('email') && validate('password')) {
      console.log('FIRE FORM');
    }
  };
  const onBlur = (event: ChangeEvent<HTMLInputElement>) => {
    validate(event.target.id);
  };
  const validate = (id: string) => {
    switch (id) {
      case 'fullName':
        if (!/^.{6,7}$/.test(fullName)) {
          setState((prev) => ({ ...prev, fullNameError: 'err' }));
          return false;
        } else {
          setState((prev) => ({ ...prev, fullNameError: '' }));
          return true;
        }
        break;
      case 'email':
        if (!/\S+@\S+\.\S+/.test(email)) {
          setState((prev) => ({ ...prev, emailError: 'err' }));
          return false;
        } else {
          setState((prev) => ({ ...prev, emailError: '' }));
          return true;
        }
        break;
      default:
        if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(password)) {
          setState((prev) => ({ ...prev, passwordError: 'err' }));
          return false;
        } else {
          setState((prev) => ({ ...prev, passwordError: '' }));
          return true;
        }
    }
  };

  return (
    <div className='join'>
      <h2>JOIN</h2>
      <h3>some subheading</h3>
      <form onSubmit={onSubmit}>
        <label>Name</label>
        <input
          type='text'
          placeholder='Full name'
          id='fullName'
          value={fullName}
          onChange={onChange}
          onBlur={onBlur}
        />
        {fullNameError}
        <label>Email</label>
        <input
          type='text'
          placeholder='Email address'
          id='email'
          value={email}
          onChange={onChange}
          onBlur={onBlur}
        />
        {emailError}
        <label>Password</label>
        <input
          type='password'
          placeholder='Create a password'
          id='password'
          value={password}
          onChange={onChange}
          onBlur={onBlur}
        />
        {passwordError}
        <button color='primary'>
          {!state.loading ? (
            'Join Now'
          ) : (
            <img src={loadingImg} alt='loadingd' className='loading' />
          )}
        </button>
        <div className='join--terms'>
          By joining, you agree to our
          <Link to={{ pathname: '/terms' }}> Terms of Service</Link> and
          <Link to={{ pathname: '/terms' }}> Privacy Policy</Link>
        </div>
      </form>
    </div>
  );
};

export { Join };

Answer 1

当第一个条件为假时，您的条件未评估...

所以你最好做这样的事情。...

 const onSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    const fullNameValidation =  validate('fullName')
    const emailValidation = validate('email')
    const passwordValidation = validate('password')
    if (fullNameValidation  && emailValidation && passwordValidation) {
      console.log('FIRE FORM');
    }
  };

React TypeScript：多个状态更新，但仅应用第一个

1 个答案: