Redux Forms для создания и редактирования - PullRequest
Новая
       5

Redux Forms для создания и редактирования

1 голос
/ 23 мая 2019

Я работаю с редукс-формой.Мне нужно создать нового пользователя и обновить информацию о пользователе, используя ту же форму.Я создал необходимую форму для создания нового пользователя прямо сейчас, но я не знаю, как сделать ее доступной для обновления.

Код компонента формы: 

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));

Как можноЯ делаю форму доступной для создания и обновления?

1 Ответ

1 голос
/ 23 мая 2019

Чтобы использовать ту же форму и для обновления, вам нужно будет присвоить форме начальное значение. Где начальными значениями будет значение учащегося, которого вы хотите редактировать. При создании нового студента значения инициализации будут пустыми. 

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 /

Также в вашем файле реакции на маршрут попробуйте сохранить два маршрута с одним и тем же компонентом формы. 

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

Поэтому, когда вам нужно создать, вы перенаправляете на создание маршрута, а когда вам нужно обновить, перенаправляете его на обновление маршрута с идентификатором в качестве параметров.

...