如何正确进行验证

Question

我正在尝试进行验证，我可以显示我的错误，但是我必须单击“注册”页面之外的某个位置，并且我希望它在单击“注册”按钮时显示任何错误……我做错了吗？这是我的句柄Register函数

handleRegister = () => {
const { firstName, lastName, userName, password, email } = this.state.user;
const isValid = this.validate();

if (isValid) {
  postFetch('http://192.168.0.7:4000/users/add', {
    firstName,
    lastName,
    userName,
    password,
    email
  })
    .then(
      this.setState({
        users: [
          ...this.state.users,
          {
            firstName,
            lastName,
            userName,
            password,
            email
          }
        ]
      })
    )
    .catch(err => console.log(err));
}
};

这是我的验证功能

validate = () => {
let { firstName, lastName, userName, password, email } = this.state.user;
const { users } = this.state;
let firstNameError = '';
let lastNameError = '';
let userNameError = '';
let passwordError = '';
let emailError = '';

if (!firstName || firstName.length <= 3) {
  firstNameError = 'First Name Required';
}
if (!lastName || lastName.length <= 3) {
  lastNameError = 'Last Name Required';
}
if (!userName || userName.length <= 3) {
  userNameError = 'User Name Required';
}
if (users.find(user => user.userName === userName)) {
  userNameError = 'User already exists';
}
if (!password) {
  passwordError = 'Password Required';
} else if (password.length <= 5) {
  passwordError = 'Password is to short';
} else if (password.length >= 21) {
  passwordError = 'Password is to long';
} else if (
  password === 'password'.toLocaleLowerCase() ||
  password === 'password'.toLocaleUpperCase()
) {
  passwordError = 'Can not use password for Password';
}
if (!email) {
  emailError = 'E-mail Required';
} else if (!email.includes('@')) {
  emailError = 'Invalid E-mail';
}

if (
  firstNameError ||
  lastNameError ||
  userNameError ||
  passwordError ||
  emailError
) {
  this.setState({
    user: {
      ...this.state.user,
      firstNameError,
      lastNameError,
      userNameError,
      passwordError,
      emailError
    }
  });
  return false;
}
return true;
};

这是我的注册课程

          <Register
            firstName={this.state.user.firstName}
            firstNameError={this.state.user.firstNameError}
            lastName={this.state.user.lastName}
            lastNameError={this.state.user.lastNameError}
            userName={this.state.user.userName}
            userNameError={this.state.user.userNameError}
            password={this.state.user.password}
            passwordError={this.state.user.passwordError}
            email={this.state.user.email}
            emailError={this.state.user.emailError}
            handleUser={this.handleUser}
            handleRegister={this.handleRegister}
          />

export default class Register extends Component {
constructor(props) {
super(props);
this.state = {
  user: {
    firstName: props.firstName,
    lastname: props.lastName,
    userName: props.userName,
    password: props.password,
    email: props.email,
    firstNameError: props.firstNameError,
    lastNameError: props.lastNameError,
    userNameError: props.userNameError,
    passwordError: props.passwordError,
    emailError: props.emailError
  }
};
}

render() {
return (
  <div style={{ backgroundColor: 'white' }}>
    <h3 style={{ color: 'black' }}>Register</h3>
    <hr/>
    <TextField
      style={{ width: 90 }}
      label='First Name'
      name='firstName'
      type='text'
      defaultValue={this.state.user.firstName}
      onChange={this.props.handleUser}
    />
    <div style={{ color: 'red' }}>{this.state.user.firstNameError}</div>
    <div>
      <TextField
        style={{ width: 90 }}
        label='Last Name'
        name='lastName'
        type='text'
        defaultValue={this.state.user.lastname}
        onChange={this.props.handleUser}
      />
    </div>
    <div style={{ color: 'red' }}>{this.state.user.lastNameError}</div>
    <div>
      <TextField
        style={{ width: 90 }}
        label='User Name'
        name='userName'
        type='text'
        defaultValue={this.state.user.userName}
        onChange={this.props.handleUser}
      />
    </div>
    <div style={{ color: 'red' }}>{this.state.user.userNameError}</div>
    <div>
      <TextField
        style={{ width: 90 }}
        label='Password'
        name='password'
        type='password'
        defaultValue={this.state.user.password}
        onChange={this.props.handleUser}
      />
    </div>
    <div style={{ color: 'red' }}>{this.state.user.passwordError}</div>
    <div>
      <TextField
        style={{ width: 90 }}
        label='E-mail'
        name='email'
        type='email'
        defaultValue={this.state.user.email}
        onChange={this.props.handleUser}
      />
    </div>
    <div style={{ color: 'red' }}>{this.state.user.emailError}</div>
    <div>
      <Button onClick={this.props.handleRegister}>Register</Button>
    </div>
  </div>
);
}
}

我正在用React Java脚本做到这一点