react减去输入值的字符

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个字符，密码验证也很奇怪，它只接受一个小写字符然后一个数字和一个字符，只有当数字介于两者之间时，密码确认也不起作用，这很混乱代码，如果有人有线索，我会很高兴听到，您可以在codesandbox

上测试此代码

实际上，如果发生任何更改，这是Sign Up组件的Form子组件，并在父组件中导出

谢谢

Answer 1

您的实现存在一些问题。

问题

在每个handleChange() this.state中，不保存包含 UPDATED 值的值。 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中找到反应中不受控制的输入即可。

注意：如果您不熟悉这些语法中的任何一种，请尝试使用Google搜索 ES6功能。其中之一是*对象分解。我假设您在语法上不会有任何问题。