javascript - 使用 React 进行表单验证

Question

我正在尝试创建用户注册表单，但遇到了显示表单验证错误的障碍。

问题: 1) 在提交没有错误的输入时，输入不再将 (axios) 发送到数据库 2) 修复错误后，错误消息不会消失。

旁注:我已注释掉firstNameError、lastNameError 和emailError，以便仅关注passwordError。

import React, { Component } from 'react';
import axios from 'axios';
import { Form, Container } from 'react-bootstrap'

export default class RegisterUser extends Component {
  constructor(props) {
    super(props);

    this.onChangeFirstName = this.onChangeFirstName.bind(this);
    this.onChangeLastName = this.onChangeLastName.bind(this);
    this.onChangeEmail = this.onChangeEmail.bind(this);
    this.onChangePassword = this.onChangePassword.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      password: '',
      firstNameError: '',
      lastNameError: '',
      emailError: '',
      passwordError: '',
    }
  }

  onChangeFirstName(e) {
    this.setState({
      firstName: e.target.value
    })
  }

  onChangeLastName(e) {
    this.setState({
      lastName: e.target.value
    })
  }

  onChangeEmail(e) {
    this.setState({
      email: e.target.value
    })
  }

  onChangePassword(e) {
    this.setState({
      password: e.target.value
    })
  }

  validate() {
    // let firstNameError= '';
    // let lastNameError= '';
    //  let emailError= '';
    let passwordError = '';

    if (!this.state.password.length < 6) {
      passwordError = 'Password must be at least 6 characters'
    }

    if (passwordError) {
      this.setState({ passwordError })
      return false
    }

    return true;
  }

  onSubmit(e) {
    e.preventDefault();
    const isValid = this.validate()
    if (isValid) {
      const user = {
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        email: this.state.email,
        password: this.state.password,
      }

      console.log(user);

      axios.post('http://localhost:5001/users/add', user)
        .then(res => console.log(res.data));

      this.setState({
        firstName: '',
        lastName: '',
        email: '',
        password: ''
      })
    }
  }

  render() {
    return (
      <Container>
        <h3>Register</h3>
        <Form onSubmit={this.onSubmit}>
          <Form.Group>
            <Form.Label>First name</Form.Label>
            <Form.Control
              type="text"
              id="firstName"
              required
              value={this.state.firstName}
              onChange={this.onChangeFirstName}
            />
            <div style={{ color: 'red' }}>
              {this.state.firstNameError}
            </div>
          </Form.Group>
          <Form.Group>
            <Form.Label>Last name</Form.Label>
            <Form.Control
              id="lastName"
              type="text"
              required
              value={this.state.lastName}
              onChange={this.onChangeLastName}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.lastNameError}
          </div>
          <Form.Group>
            <Form.Label>Email</Form.Label>
            <Form.Control
              type="email"
              id="email"
              required
              value={this.state.email}
              onChange={this.onChangeEmail}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.emailError}
          </div>
          <Form.Group>
            <Form.Label>Password</Form.Label>
            <Form.Control
              type="password"
              id="password"
              required
              value={this.state.password}
              onChange={this.onChangePassword}
            />
          </Form.Group>
          <div style={{ color: 'red' }}>
            {this.state.passwordError}
          </div>
          <Form.Group>
            <Form.Control
              type="submit"
              value="Register"
              className="btn btn-primary"
            />
          </Form.Group>
        </Form>
      </Container>
    )
  }
}

Answer 1

您的验证代码未重置错误消息。如果密码有效，应使用以下命令重置:

this.setState({ passwordError: '' })

我错误地认为 if(passwordError) 对于空字符串会返回 true，但事实并非如此。如果您能够使用开发人员工具在浏览器中调试代码，您可能会明白为什么没有发布正确的内容。这可能是由于使用常量作为有效标志的结果。