javascript - TypeError：无法读取嵌套状态反应js的未定义属性“名称”

Question

基本上我有一个嵌套循环，我想用表单中的值填充它，并检查使用 react js 中的 onchange 输入的值的验证。现在专注于电子邮件输入，我得到 TypeError: Cannot read property 'name' of undefined error 每次我尝试在电子邮件字段中输入一个值时

代码是

    class Auth extends Component {
  constructor() {
    super();
    this.state = {
      validation: {
        email: {
          validated: false,
          value: '',
        },
        password: {
          validated: false,
          value: '',
        },
        confirmPassword: {
          validated: false,
          value: '',
        },
      },
    };
    this.onChangeHandler = this.onChangeHandler.bind(this)
  }

        onChangeHandler(e){

          const {name, value} = e.target

          this.setState({
             validation:{
              ...this.state.validated,
              [name] :{
                ...this.state.validated.name,
                [value]: value,
                validated: validator(name, value)
                }
              }
            }

          )


        }


        render() {
          return (
            <div className="auth-container">
              <section className="section-login">
                <h1 className="form-header">
                  <span className="form-header-main">Register</span>
                  <span className="form-header-sub">Please Register </span>
                </h1>
                <form className="form-login">
                  <label htmlFor="firstname" className="form-input-label"><b>First Name</b></label>
                  <input type="text" id="firstname" className="form-input" placeholder="Enter Username" name="text"   required />
                  <label htmlFor="email" className="form-input-label"><b>Email</b></label>
                  <input  onChange={this.onChangeHandler} type="text" id="email" className="form-input" value={this.state.validation.email.value} placeholder="Enter Email" name="email" required />
                  <label htmlFor="psw" className="form-input-label"><b>Password</b></label>
                  <input onChange={this.onChangeHandler} type="password" id="psw" className="form-input" value={this.state.validation.password.value} placeholder="Enter Password" name="password" required />
                  <label htmlFor="psw-repeat" className="form-input-label"><b>Confirm Password</b></label>
                  <input onChange={this.onChangeHandler} type="password" id="psw-repeat" className="form-input" value={this.state.validation.confirmPassword.value} placeholder="Repeat Password" name="passwordConfirm" required />
                  <input type="submit" className="submit-button" value="Register" />
                </form>
              </section>

            </div>
          );
        }
}

export default Auth;

标签： javascriptreactjs