Forms 提交POST后反应表单未清除输入

不确定为什么

addUser（）

中的setState函数没有执行它的任务。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);

import React，{Component，PropTypes}来自'React'；
从'react intl'导入{injectIntl，intlShape，FormattedMessage}；
从“反应路由器”导入{Link}；
//导入样式
从“/UserRegistrationForm.css”导入样式；
导出类UserRegistrationForm扩展组件{
建造师（道具）{
超级（道具）；
this.state={昵称：''，学生ID:''，电子邮件：''，密码：'}；
this.handleInputChange=this.handleInputChange.bind（this）；
this.addUser=this.addUser.bind（this）；
}
handleInputChange（事件）{
这是我的国家({
[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.昵称、this.state.studentId、this.state.email、this.state.password）；
this.setState（{昵称：''，学生ID:''，电子邮件：''，密码：'}）；
}
};
render（）{
返回(
全名
学生证
电子邮件
密码
注册并开始学习！



配置文件页面的临时按钮


已经有帐户了吗？在这里登录
);
}
}
UserRegistrationForm.propTypes={
addUser:PropTypes.func.isRequired，
intl:intlShape.isRequired，
};
导出默认injectIntl（UserRegistrationForm）；

react中没有双向数据绑定，因此在实现受控组件时必须小心

对于您的每一个输入，要使其成为提交时清除的受控输入，您必须将其值设置为相应的状态值，例如

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

及

---

。。。对于每一个输入，添加value属性将确保它们与this.setState保持同步，this.setState调用

时完全忘记了value属性。非常感谢。

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