handleSubmit 函数中的 this.setState 未重置表单输入答案

【问题标题】：this.setState in handleSubmit function not resetting form inputshandleSubmit 函数中的 this.setState 未重置表单输入
【发布时间】：2019-01-20 01:11:26
【问题描述】：

我想在提交后重置/清除我的表单，但无法在我的 handleSubmit 函数中设置状态。输入不清除。

我注意到由于某种原因记录“this.state”会正确记录受控输入，但记录“this”然后查看控制台中的状态对象显示它是空的。所以看起来“this”和“this.state”里面的状态对象是不同的，我不明白为什么。所以我觉得这一定是问题的一部分。

我了解到 setState 是异步的，但我看到了其他类似的代码似乎可以工作。为了测试代码，我实际上只是尝试在 handleSubmit 函数中设置状态。

import React, { Component } from "react";
import { connect } from "react-redux";
import { signIn } from "../../store/actions/authActions";

class SignIn extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
    //this.handleSubmit = this.handleSubmit.bind(this); Don't need this..
  }

  handleChange = e => {
    console.log(this.state);
    this.setState({
      [e.target.id]: e.target.value
    });
    console.log("handleChange this.state", this.state);
    //LOGS handleChange this.state {email: "asdf@asdf.com", password: "as"}
    console.log("handleChange this", this);
    //LOGS handleChange this SignIn {props: {…}, context: {…}, refs: {…}, updater: {…}, handleChange: ƒ, …}
    //                --> inside this object, state: email: "", password: ""
  };

  handleSubmit = e => {
    e.preventDefault();
    console.log("Before this.setState handleSubmit this.state", this.state); 
    //LOGS Before this.setState handleSubmit this.state {email: "asdf@asdf.com", password: "asdf"}
    console.log("Before this.setState handleSubmit this", this);
    //LOGS Before this.setState handleSubmit this SignIn {props: {…}, context: {…}, refs: {…}, updater: {…}, handleChange: ƒ, …}
    //                --> inside this object, state: email: "", password: ""

    // this.props.signIn(this.state);
    const newState = {
      email: "",
      password: ""
    };
    this.setState(newState, () => {
      console.log("Set state was called");
    });

    console.log("After this.setState handleSubmit this.state", this.state);
    // LOGS After this.setState handleSubmit this.state {email: "asdf@asdf.com", password: "asdf"}
    console.log("After this.setState handleSubmit this", this);
    //LOGS After this.setState handleSubmit this SignIn {props: {…}, context: {…}, refs: {…}, updater: {…}, handleChange: ƒ, …}
    //                --> inside this object, state: email: "", password: ""

  };

  render() {
    const { authError } = this.props;
    return (
      <div className="container">
        <form onSubmit={this.handleSubmit} className="white">
          <h5 className="grey-text text-darken-3">Sign In</h5>
          <div className="input-field">
            <label htmlFor="email">Email</label>
            <input type="email" onChange={this.handleChange} id="email" />
          </div>
          <div className="input-field">
            <label htmlFor="password">Password</label>
            <input type="password" onChange={this.handleChange} id="password" />
          </div>
          <div className="input-field">
            <button className="btn pink lighten-1">Login</button>
          </div>
          <div className="red-text center">
            {authError ? <p>{authError}</p> : null}
          </div>
        </form>
      </div>
    );
  }
}
const mapDispatchToProps = dispatch => {
  return {
    signIn: creds => {
      dispatch(signIn(creds));
    }
  };
};

const mapStateToProps = state => {
  return {
    authError: state.auth.authError
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignIn);

【问题讨论】：

标签： reactjs setstate

【解决方案1】：

尝试使用每个字段中的 value 属性将您的字段绑定到状态属性。

电子邮件输入如下所示：

<input type="email" onChange={this.handleChange} id="email" />

密码输入如下所示：

<input type="password" onChange={this.handleChange} value={this.state.password} id="password" />

【讨论】：