React 状态下的访问对象未将字段值提交给状态对象

Question

我在访问我所在州的对象时遇到问题。 我的注册表目前如下所示：

class Register extends Component {
  state = {
     formData: {
       name: '',
       email: '',
       password: '',
       password2: '',
     },


  };

  onChange = (e) => {
    const { formData } = this.state
    this.setState({...formData, [e.target.name]: e.target.value });
  };

  render() {
    const { name, email, password, password2 } = this.state;
    const onSubmit = (e) => {
      e.preventDefault();
      if (password !== password2) {
        console.log('password do not match');
      } else {
        console.log(this.state);
      }
    };
    return (
      <section className='container'>
        <h1 className='large text-primary'>Sign Up</h1>
        <p className='lead'>
          <i className='fas fa-user'></i> Create Your Account
        </p>
        <form
          className='form'
          action='create-profile.html'
          onSubmit={(e) => onSubmit(e)}>
          <div className='form-group'>
            <input
              type='text'
              placeholder='Name'
              name='name'
              value={name}
              onChange={this.onChange}
              required
            />
          </div>
          <div className='form-group'>
            <input
              type='email'
              placeholder='Email Address'
              name='email'
              value={email}
              onChange={this.onChange}
            />
            <small className='form-text'>
              This site uses Gravatar so if you want a profile image, use a
              Gravatar email
            </small>
          </div>
          <div className='form-group'>
            <input
              type='password'
              placeholder='Password'
              name='password'
              minLength='6'
              value={password}
              onChange={this.onChange}
            />
          </div>
          <div className='form-group'>
            <input
              type='password'
              placeholder='Confirm Password'
              name='password2'
              value={password2}
              onChange={this.onChange}
              minLength='6'
            />
          </div>
          <input type='submit' className='btn btn-primary' value='Register' />
        </form>
        <p className='my-1'>
          Already have an account? <a href='login.html'>Sign In</a>
        </p>
      </section>
    );
  }
}

现在我确实将状态更改为：

state = {
    // formData: {
    //   name: '',
    //   email: '',
    //   password: '',
    //   password2: '',
    // },

    name: '',
    email: '',
    password: '',
    password2: '',
  };

然后让它像没有 formData 对象一样工作。但是我怎样才能访问这个formData？ 通过各种尝试，a 能够：

只将数据放在一个表单域中。在输入名称值和输入电子邮件值之后，我的名字从表单中删除。 - 我无法输入任何表单字段。 - 我能够改变状态，但不能在我的 formData 对象中。我有空对象，并且我的字段值处于状态。 - 试过const {...formData} = this.state，也没有用

不确定是什么问题。

感谢任何线索

Answer 1

尝试以下更改

class Register extends Component {
  state = {
     formData: {
       name: '',
       email: '',
       password: '',
       password2: '',
     },


  };

  onChange = (e) => {

    // setting formData in the state properly
    const { formData } = this.state;
    let newFormData = {...formData};
    newFormData[e.target.name] = e.target.value;
    this.setState({ 
      formData:newFormData
    });
  };

  // onSubmit Handler outside render
  const onSubmitHandler = (e) => {

      // Destructing required fields from state.formData and using it
      const {password,password2} = this.state.formData;
      e.preventDefault();
      if (password !== password2) {
        console.log('password do not match');
      } else {
        console.log(this.state);
      }
    };

  render() {
    // Destructing required fields from state.formData and using it
    const { name, email, password, password2 } = this.state.formData;

    return (
      <section className='container'>
        <h1 className='large text-primary'>Sign Up</h1>
        <p className='lead'>
          <i className='fas fa-user'></i> Create Your Account
        </p>
        <form
          className='form'
          action='create-profile.html'
          onSubmit={this.onSubmitHandler}>
          <div className='form-group'>
            <input
              type='text'
              placeholder='Name'
              name='name'
              value={name}
              onChange={this.onChange}
              required
            />
          </div>
          <div className='form-group'>
            <input
              type='email'
              placeholder='Email Address'
              name='email'
              value={email}
              onChange={this.onChange}
            />
            <small className='form-text'>
              This site uses Gravatar so if you want a profile image, use a
              Gravatar email
            </small>
          </div>
          <div className='form-group'>
            <input
              type='password'
              placeholder='Password'
              name='password'
              minLength='6'
              value={password}
              onChange={this.onChange}
            />
          </div>
          <div className='form-group'>
            <input
              type='password'
              placeholder='Confirm Password'
              name='password2'
              value={password2}
              onChange={this.onChange}
              minLength='6'
            />
          </div>
          <input type='submit' className='btn btn-primary' value='Register' />
        </form>
        <p className='my-1'>
          Already have an account? <a href='login.html'>Sign In</a>
        </p>
      </section>
    );
  }
}