Вопрос по reactjs, redux, javascript, redux-form – Как вы передаете в динамическом имени формы в форме избыточного?

15

Я пытаюсь использовать этот код для передачи динамического имени формы в reduxForm.

Вот код, который я нашел:

let FormAddress = compose(connect((state, props) => ({form: props.form})), reduxForm({destroyOnUnmount: false, asyncBlurFields: []}))(ValidationForm);

Из этой статьи:https://github.com/erikras/redux-form/issues/603#issuecomment-254271319

Но я не совсем уверен, что происходит.

Вот как я сейчас это делаю:

const formName = 'shippingAddress';
const form = reduxForm({
  form: formName
});

export default connect(mapStateToProps)(CityStateZip);

Но я хотел бы иметь возможность передать это с помощью реквизита, как это:

const formName = 'shippingAddress';
const form = reduxForm({
  form: props.form
  // validate
});

export default connect(mapStateToProps)(CityStateZip);

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

Кто-нибудь может мне помочь?

Личное предложение здесь - но у меня было намного больше успехане используя редукционную форму. Это удивительно в том, что он делает, но когда вы начинаете нуждаться в добавлении к нему сложности из своего приложения, становится трудно работать. Я знаю, что люди добились большого успеха, но что-то вроде проблемы, с которой вы здесь сталкиваетесь, занимает 2 секунды, если вы не зависите от избыточной формы ... ajmajmajma
Просто интересно, сработал ли у меня мой ответ jpdelatorre

Ваш Ответ

2   ответа
20

Родительский компонент, который вызываетFormAddress Компонент должен отправить имя формы в реквизит какprops.form:

var formId="SomeId"
<FormAddress form={formId} />

// and in your FormAddress component have 
const form = reduxForm({
  //no need to put form again here as we are sending form props.
});

Это работает для меня.

Отлично сработало для меня, спасибо! William Janoti
Мне нравится это, потому что в моем случае использования имя действительно беспокоит родительское отображение. Теперь моя форма может быть более общей и не требует определения своего имени. theUtherSide
15

compose функция отredux библиотека. Вот что вы можете попробовать ...

<FormAddress name="shippingAddress" />

Так в вашемcomponents/FormAddress.js файл

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

class FormAddress extends React.Component { ... }

const mapStateToProps = (state, ownProps) => {
    return {
        form: ownProps.name,
        // other props...
    }
}

export default compose(
    connect(mapStateToProps),
    reduxForm({
        //other redux-form options...
    })
)(FormAddress);

Надеюсь это поможет!

Выражено это как более полный ответ, потому что ownProps как параметр в mapStateToProps позволяет пользователю более согласованно обращаться к определенному имени формы из хранилища примитивов по всему компоненту, используя «this.props» Matthew Rideout

Похожие вопросы