реагировать на вычитание символов входного значения

Question

привет, я создаю реакцию-проверку, я застрял, и я не знаю, что является причиной ошибки, поэтому мой код такой

class Form extends Component {
constructor(props){
    super(props);
    this.state= {
    username: '',
    email: '',
    password: '',
    confirm_password: '',
    errorBol: false,
    errorMessage: ''
    }

    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this)
    this.handlePcChange = this.handlePcChange.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this)

}

 handleUsernameChange(e){
    if(this.state.username.trim().length < 6){
        this.setState({
            errorBol: true,
            errorMessage: 'username character length must be at least 6 character'
        })                   
   }
   if(this.state.username.trim().length > 6){
    this.setState({
        errorBol: false,

    })                   
}

    this.setState({
        username: e.target.value
    })
}
handleEmailChange(e){

    if(this.state.email.trim().length < 1){
        this.setState({
            errorBol: true,
            errorMessage: 'please fill email field'
        })                  

   }
   if(this.state.email.trim().length > 1){
    this.setState({
        errorBol: false,

    })                  

}

    this.setState({
        email: e.target.value
    })
}
handlePasswordChange(e){
    if(this.state.password.trim().length < 8){
        this.setState({
            errorBol: true,
            errorMessage: 'password character length must be at least 8 character'
          })  


          }
            else{
                this.setState({
                    errorBol: false,
                                       })
            }
   for(let c = 0; c <= this.state.password.length; c++){
       if(this.state.password.charAt(c) !== this.state.password.charAt(c).toUpperCase()){
           this.setState({
               errorBol:true,
               errorMessage: 'at least one character of password must be capital'
           })
       }
       else{
        this.setState({
            errorBol: false,

        })
       }

   }
   for(let c = 0; c <= this.state.password.length; c++){
    if(this.state.password.charAt(c) !== this.state.password.charAt(c).toLowerCase()){
           this.setState({
          errorBol:true,
          errorMessage: 'one character of password must be lower case'
                        })
    }
    else{
        this.setState({
            errorBol: false,

        })
    }

 } 


   let containsNumber = /\d/.test(this.state.password)
   if(containsNumber === false){
       this.setState({
           errorBol: true,
           errorMessage: 'password must contain at least one number'
       })

   }else{
    this.setState({
        errorBol: false,

    })
   }



    this.setState({

        password: e.target.value
    })

}
handlePcChange(e){
    if(this.state.password !== this.state.confirm_password){
        this.setState({
            errorBol: true,
            errorMessage: 'პაროლები არ ემთხვევა'
        })
    }
    if(this.state.password === this.state.confirm_password){
    this.setState({
        errorBol: false,

    })
}
    this.setState({

        confirm_password: e.target.value
    })
}
handleFormSubmit(e){

    e.preventDefault();
   alert('hey')


}
render(){
    return(
        <div>
            <form id="formID" className="fc" onSubmit={this.handleFormSubmit}>
                <input type="text" value={this.state.username} placeholder="username"  autoComplete = "off" name="username" onChange={this.handleUsernameChange}/><br/>
                <input type="email" placeholder="email" value={this.state.email}  autoComplete = "off" name="email" onChange={this.handleEmailChange}/><br/>
                <input type="password" placeholder="password" value={this.state.password}  autoComplete = "off" name="password" onChange={this.handlePasswordChange}/><br/>
                <input type="password" placeholder="confirm passowrd"  autoComplete = "off" value={this.state.confirm_password} name="password_confirmation" onChange={this.handlePcChange}/><br/>
                <button type="submit">Submit</button>
                {this.state.errorBol === true ? this.state.errorMessage : null }
            </form>
        </div>
    )
 }
}

и ошибка: когда я ввожу 6 символов впри вводе имени пользователя по-прежнему отображается сообщение об ошибке, но когда я ввожу 8 символов, оно исчезает также, когда у меня 8 символов и удаляются 3 символа (а ввод в настоящее время имеет 5 символов, что должно вызывать ошибку в соответствии с кодом), но ничего не делает, но при удалении 4 отображаетсямне, что вход должен иметь по крайней мере 6 символов, я попробовал это также в вводе электронной почты, и он сделал то же самое, когда я ввел более 1 символа, он все еще показывал мне сообщение об ошибке, но когда я ввел 3 символа, он исчез, тогда я изменил длину имени пользователя изС 6 по 4, и это сработало, когда я ввел 6 символов, поэтому я не знаю, как это сделать, но он вычитает 2 символа, также проверка пароля тоже странная, он принимает один символ в нижнем регистре, затем один номер и один символ снова, только если число между ними и тому подобное, подтверждение пароля тоже не работает, это яssy code и если у кого-то есть подсказки, я буду рад его услышать, вы можете проверить этот код на codesandbox

, если он что-то изменит, это будет субкомпонент Form для регистрациикомпонент и экспортируется в родительский компонент

СПАСИБО

Answer 1

У вашей реализации есть некоторые проблемы.

Проблемы

В каждом handleChange() this.state есть НЕ , содержащее значения, содержащие значения ОБНОВЛЕНО .e.target.value содержит обновленный текст, поэтому используйте его.

Кроме того, вы используете одну переменную состояния, чтобы указать, является ли форма действительной или нет.Это не удастся, потому что если пользователь введет правильное имя пользователя, а остальные будут пустыми, вы все равно получите действительную форму.Это неправильно.

Кроме того, написание функции для каждого текстового поля является трудной задачей.

Предложения

Используйте одну функцию для обработки изменений пользовательского ввода.Используйте атрибут name, предоставленный вами для элементов <input>.

Используйте состояние допустимости для каждого поля.Затем разрешите отправку, если все действительны.

Посмотрите на это решение

Решение

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      username: '',
      username_valid: false,
      email: '',
      email_valid: false,
      password: '',
      password_valid: false,
      confirm_password: '',
      confirm_password_valid: false,
      errorMessage: ''
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    const field = e.target.name;
    const value = e.target.value.trim();

    let errMsg = '';

    switch (field) {
      case 'username':
        errMsg = value.length < 6 ? 'Username must be 6 char or more' : '';
        break;
      case 'email':
        errMsg = value.length < 1 ? 'Please fill up email' : '';
        break;
      case 'password':
        if (value.length < 8) {
          errMsg = 'Password must be 8 char or more';
        } else {
          let test = (/[a-z]/.test(value) ? true : false)
                    && (/[A-Z]/.test(value) ? true : false)
                    && (/\d/.test(value) ? true : false);
          errMsg = test ? '' : 'Password must contain a lowercase, an auppercase and a digit';
        }
        if (value === this.state.confirm_password) {
          this.setState({ confirm_password_valid: true });
        } else {
          this.setState({ confirm_password_valid: false });
        }
        break;
      case 'confirm_password':
        errMsg = value !== this.state.password ? 'Both passwords must match' : '';
        break;
      default:

    }

    this.setState({
      [field]: value,
      [field + '_valid']: errMsg === '' ? true : false,
      errorMessage: errMsg
    })
  }

  handleSubmit(e) {
    e.preventDefault();
    const { username_valid, email_valid, password_valid, confirm_password_valid } = this.state;
    if (username_valid && email_valid && password_valid && confirm_password_valid) {
      alert("Form submitted!");
    }
    console.log(username_valid, email_valid, password_valid, confirm_password_valid);
  }

  render() {
    const { username, email, password, confirm_password } = this.state;

    return (
      <div className="App">
        <form onSubmit={this.handleSubmit}>
          <input type="text" name="username" placeholder="username" value={username} autoComplete="off" onChange={this.handleChange} /><br />
          <input type="email" name="email" placeholder="you@example.com" value={email} autoComplete="off" onChange={this.handleChange} /><br />
          <input type="password" name="password" placeholder="password" value={password} autoComplete="off" onChange={this.handleChange} /><br />
          <input type="password" name="confirm_password" placeholder="password" value={confirm_password} autoComplete="off" onChange={this.handleChange} /><br />
          <button type="submit">Submit</button><br />
          <label>{this.state.errorMessage}</label>
        </form>
      </div>
    );
  }
}

export default App;

ПРИМЕЧАНИЕ : Если ваша форма очень проста, вы можете просто использовать неконтролируемые входы .Просто Google Неконтролируемые входы в реакции вы найдете.

ПРИМЕЧАНИЕ : Если вы новичок в любом из этих синтаксисов, попробуйте поискать ES6 функции .Одним из них является * разрушение объекта.Я предполагаю, что у вас не возникнет проблем с синтаксисом.