简体   繁体   中英

React - setState not resetting input

Following my first React tutorial. My code seems to be exactly like the tutorial, but my input doesn't reset within a form component. The first time I submit, everything works fine, but the state holds onto the first value. Even when calling setState with a console.log in a callback, it seems like setState doesn't even fire. this is bound in my constructor function.

import React, { Component } from 'react';
import TenantActions from '../actions/TenantActions';
export default class AddTenantForm extends Component {

 constructor(props) {
   super(props);

  this.state = {
    name: '',
  }

  this.onSubmit = this.onSubmit.bind(this);
 }

 onSubmit(event) {
   event.preventDefault();

   console.log('1. On Submit click, sending addNewTenant action w/', this.state);

   TenantActions.addNewTenant(this.state);

   this.setState = ({ name: '' });
 }

 render() {
   return (
     <form>
       <div className="form-group">
       <input type="text"
             className="form-control"
             id="tenantName"
             placeholder="Bob Smithers"
             value={this.state.name}
             onChange={e => this.setState({ name: e.target.value })}
             />
    </div>
    <button className="btn btn-default"
            onClick={this.onSubmit}
            >Submit</button>
  </form>
  )
 }
}

this.setState is a function. You have a typo ( = extra) in the function onSubmit .

Replace this.setState = ({...}) with this.setState({name: ''})

More about setState

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM