web-dev-qa-db-ja.com

動的フォーム名をredux形式でどのように渡しますか？

このコードを使用して動的フォーム名を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);

しかし、私がそれを試してみると、それが小道具が何であるかを知らないと不平を言っています-私はそれが上記の機能の範囲外にあると信じているからです。

誰かが私を助けてくれますか？

javascriptreactjsreduxredux-form
21
jrutter

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

これは私にとってはうまくいきます。

28
Parameshwar Ande

そのスニペットは基本的に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);

お役に立てれば！

20
jpdelatorre