2017-01-30 8 views
0

Не знаете, почему функция setState в addUser() не выполняет свою работу. Запрос POST работает отлично, но входные данные не очищаются, и это проблема для пользователей. Возможно, вторая пара глаз может обнаружить недостаток.Реагент формы не очищающие входы после отправки POST

import React, { Component, PropTypes } from 'react'; 
import { injectIntl, intlShape, FormattedMessage } from 'react-intl'; 
import { Link } from 'react-router'; 

// Import Style 
import styles from './UserRegistrationForm.css'; 

export class UserRegistrationForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { nickname: '', studentId: '', email: '', password: '' }; 
    this.handleInputChange = this.handleInputChange.bind(this); 
    this.addUser = this.addUser.bind(this); 
    } 

    handleInputChange(event) { 
    this.setState({ 
     [event.target.name]: event.target.value, 
    }); 
    } 

    addUser =() => { 
    if (this.state.nickname && this.state.studentId && this.state.email && this.state.password) { 
     this.props.addUser(this.state.nickname, this.state.studentId, this.state.email, this.state.password); 
     this.setState({ nickname: '', studentId: '', email: '', password: '' }); 
    } 
    }; 

    render() { 
    return (
     <div className={`${styles.formContainer} ${styles.center}`}> 
     <i className={`${styles.cap} fa fa-graduation-cap`} /> 
     <h1 className={styles.title}><FormattedMessage id="siteTitle" /></h1> 

     <div className="row"> 
      <form method="POST" className="col-lg-4 push-lg-4 col-md-6 push-md-3 col-xs-8 push-xs-2"> 
      <div className="form-group row"> 
       <label className="input-labels">Full Name</label> 
       <input type="text" className="form-control" name="nickname" placeholder="Full Name" onChange={this.handleInputChange} /> 
      </div> 
      <div className="form-group row"> 
       <label className="input-labels">Student ID</label> 
       <input type="text" className="form-control" name="studentId" placeholder="Student ID" onChange={this.handleInputChange} /> 
      </div> 
      <div className="form-group row"> 
       <label className="input-labels">Email</label> 
       <input type="email" className="form-control" name="email" placeholder="Email" onChange={this.handleInputChange} /> 
      </div> 
      <div className="form-group row"> 
       <label className="input-labels">Password</label> 
       <input type="password" className="form-control" name="password" placeholder="Password" onChange={this.handleInputChange} /> 
      </div> 
      <div className={styles.center}> 
       <button 
       className={`${styles.btnOutlineSecondary} btn btn-outline-secondary ${styles.signInButton}`} 
       type="button" onClick={this.addUser} 
       > 
       Register and Start Studying! 
       </button><br /><br /> 
       <Link to="/profile"><button className="btn btn-info" type="button">Temp Button to Profile Page</button></Link><br /><br /> 
       <Link to="/">Already have an account? Sign in Here</Link> 
      </div> 
      </form> 
     </div> 
     </div> 
    ); 
    } 
} 

UserRegistrationForm.propTypes = { 
    addUser: PropTypes.func.isRequired, 
    intl: intlShape.isRequired, 
}; 

export default injectIntl(UserRegistrationForm); 

ответ

1

Там нет двухстороннего связывание данных в реакции, так что вы должны быть осторожны при осуществлении контролируемых компонентов https://facebook.github.io/react/docs/forms.html#controlled-components

для каждого из ваших материалов, чтобы сделать их контролируемые входы, которые будут очищать на submit, вы должны установить их значения в соответствующее значение состояния, например

<input value={this.state.nickname} type="text" className="form-control" name="nickname" placeholder="Full Name" onChange={this.handleInputChange} /> 

и

<input value={this.state.nickname} type="text" className="form-control" name="studentId" placeholder="Student ID" onChange={this.handleInputChange} /> 

... для каждого из ваших входов, добавив значение атрибута убедитесь, что они остаются в синхронизации с, this.setState называет

+0

Полностью забыл о стоимости имущество. спасибо – pbgnz