Проверка полей ввода в реакции

Question

Я новичок, чтобы отреагировать и создал форму входа в систему с несколькими наборами проверок, чтобы вызвать ошибки в случае пустого имени пользователя или пароля. В самом первом случае, когда ничего не вставлено и нажата кнопка Submit , все работает нормально. Но как только значение изменяется на значение, введенное пользователем, а затем удаляется из текстового ввода, переменная получает значение «» и никогда не возвращается к значению null. Это избегает моего специального лечения, где я вставил !this.state.username. Он застревает в этот момент, и отправка формы в любом случае отправляется на сервер. Я тоже пробовал обрезать, но это не сработало

class LoginClassComponent extends React.Component {


constructor(props) {
    super(props);
    this.state = {
      username: this.props.username,
      password: this.props.password,
      errorUsername: null,
      errorPassword: null,
    };

this.handleValidation = this.handleValidation.bind(this);
this.handleChange = this.handleChange.bind(this);

}

//assign textbox values to props
  handleChange = (e) => {
    this.setState({
      [e.target.name]: [e.target.value],
    });
  };
  //handle input validation
  handleValidation = (event) => {
    if (!this.state.username) {
      this.setState({ errorUsername: "Please enter User Name" });
      event.preventDefault();
    }

    if (!this.state.password) {
      this.setState({ errorPassword: "Please enter Password" });
      event.preventDefault();
    }

Answer 1

Ваш handleChange неверен, вы должны убрать квадратные скобки вокруг значения:

handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

Answer 2

для этого сценария я бы go с компонентами функций и хуками, но ради простоты и не зная, как выглядит остальная часть вашей реализации, я бы go сделал следующее. Предполагая, что вы запускаете handleValidation либо при размытии поля, либо при нажатии кнопки "Отправить", попробуйте изменить его следующим образом:

handleValidation = (event) => {
    event.preventDefault();
    let errorUsername = null;
    let errorPassword = null;
    if (event.target.name === 'username') {
        errorUsername = (event.target.value === '') ? "Please enter User Name" : null;

    } else if (event.target.name === 'password') {
        errorPassword = (event.target.value === '') ? "Please enter Password" : null;

    }
    this.setState({ errorUsername, errorPassword });
}

Дайте мне знать, если вам нужна дополнительная помощь.

Приветствия! 100