Question

我正在使用redux-form。我需要创建一个新用户并使用相同的表单更新该用户的信息。我已经填写了创建新用户所需的表格，但是我不知道如何使它可用于更新。

表单组件代码：

class UserRegistrationForm extends PureComponent {
  static propTypes = {
    handleSubmit: PropTypes.func.isRequired,
    reset: PropTypes.func.isRequired,
    isLoading: PropTypes.bool,
    submitting: PropTypes.bool.isRequired,
  };

  constructor() {
    super();
    this.state = {
      showPassword: false,
    };
  }

  showPassword = (e) => {
    e.preventDefault();
    this.setState(prevState => ({ showPassword: !prevState.showPassword }));
  };

  onSubmit = data => {
    console.log(data);
  }

  render() {
    const { handleSubmit, reset } = this.props;

    return (
      <Col md={12} lg={12}>
        <Card>
          <CardBody>
            <div className="card__title">
              <h5 className="bold-text">STUDENT INFORMATION</h5>
            </div>
            <form className="form form--horizontal" onSubmit={handleSubmit}>
              <div className="form__form-group">
                <span className="form__form-group-label">First Name*</span>
                <div className="form__form-group-field">
                  <Field
                    name="name"
                    component="input"
                    type="text"
                    placeholder="Name"
                  />
                </div>
              </div>
              <div className="form__form-group">
                <span className="form__form-group-label">Last Name*</span>
                <div className="form__form-group-field">
                  <Field
                    name="surname"
                    component="input"
                    type="text"
                    placeholder="Surname"
                  />
                </div>
              </div>
              <div className="form__form-group">
                <span className="form__form-group-label">E-mail*</span>
                <div className="form__form-group-field">
                  <Field
                    name="email"
                    component="input"
                    type="email"
                    placeholder="example@mail.com"
                  />
                </div>
              </div>
              <ButtonToolbar className="form__button-toolbar">
                <Button color="primary" type="submit" className="icon" size="sm"><SendIcon /> Submit</Button>
                <Button type="button" onClick={reset} className="icon" size="sm">
                  <CloseIcon /> Cancel
                </Button>
              </ButtonToolbar>
            </form>
          </CardBody>
        </Card>
      </Col>
    );
  }
}

export default reduxForm({
  validate,
  form: 'User_Registration_Form', // a unique identifier for this form
})(withTranslation('common')(UserRegistrationForm));

如何使表单可用于创建和更新？

Answer 1

要在更新中也使用相同的表单，则需要为Form赋予initialValues状态。初始值将是您要编辑的学生的值。创建新学生时，初始化值将为空。

UserRegistrationForm = reduxForm({
  validate,
  form: 'User_Registration_Form', // a unique identifier for this form
})(withTranslation('common')(UserRegistrationForm));
InitializeFromStateForm = connect(
  state => ({
    initialValues: studentData
  }),
)(InitializeFromStateForm)
export default UserRegistrationForm

这里是一个示例https://redux-form.com/6.6.3/examples/initializefromstate/

还要在您的react route文件中，尝试维护两个具有相同表单组件的路由。

<Route path="/student/create" component={UserRegistrationForm} />
<Route path="/student/update/:id" component={UserRegistrationForm} />

因此，每当需要创建时，都将重定向以创建路由，并且在需要更新时，请将其重定向以更新路由，并将id作为参数。

用于创建和编辑的Redux表单

1 个答案: