Question

不确定为什么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);

Answer 1

反应中没有双向数据绑定，因此在实施受控组件时必须小心https://facebook.github.io/react/docs/forms.html#controlled-components

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

<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} />

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

提交POST后，React表单不清除输入

1 个答案: