Question

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

我已经注意到，出于某种原因，登录“ this.state”会正确记录受控输入，但是登录“ this”然后在控制台中查看状态对象，则显示该状态为空。因此看来“ this”和“ this.state”内部的状态对象是不同的，我不知道为什么。所以我觉得这一定是问题的一部分。

我了解到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

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

电子邮件输入如下所示：

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

密码输入如下：

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

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

1 个答案: