javascript - 用于创建和编辑的 Redux 表单

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

要对更新也使用相同的表单，您需要为表单提供一个 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 path="/student/create" component={UserRegistrationForm} />
<Route path="/student/update/:id" component={UserRegistrationForm} />

因此，无论何时您需要创建，您都重定向到创建路由，当您需要更新时，将其重定向到更新路由，并将 id 作为参数。