this.setState в функции handleSubmit не сбрасывает входные данные формы - PullRequest
Новая
       9

this.setState в функции handleSubmit не сбрасывает входные данные формы

0 голосов
/ 20 января 2019

Я хочу сбросить / очистить форму после ее отправки, но не могу установить setState внутри моей функции handleSubmit.Входы не очищаются.

Я заметил, что по какой-то причине регистрация «this.state» правильно регистрирует контролируемые входы, но запись «this» и затем просмотр объекта состояния в консоли показывает, что он пуст.Похоже, что объекты состояния внутри «this» и «this.state» различаются, и я не понимаю, почему. Так что я чувствую, что это должно быть частью проблемы.

Я узнал, что setStateasync, но я видел другой подобный код, который, кажется, работает.Чтобы проверить код, я буквально просто пытаюсь установить 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);

1 Ответ

0 голосов
/ 20 января 2019

Попробуйте связать свои поля со свойствами состояния, используя атрибут value в каждом из них.

Ввод электронной почты будет выглядеть следующим образом: 

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

И ввод пароля будет выглядеть следующим образом:

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