this.setState 在 handleSubmit 函数中不重置表单输入

Question

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

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

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

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);

Answer 1

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

电子邮件输入如下所示：

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

密码输入如下所示：

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

this.setState 在 handleSubmit 函数中不重置表单输入

this.setState in handleSubmit function not resetting form inputs

setstate

reactjs