web-dev-qa-db-ja.com

Reduxフォームv6.0.0外からの送信ボタン

この質問は Redux Form v6.0. に関連しています（この質問を書いている時点ではv6.0.0-alpha.15です）。

フォームコンポーネントの外部からフォーム検証ステータス（pristine、submitting、invalidなど）を取得するにはどうすればよいですか？

例を挙げましょう。これは「古典的なredux形式」の疑似構造です。

<Form(MyExampleForm)>
    <MyExampleForm>
        <input name="title" ... />
        <submit-button />

...どこ <submit-button> JSXでは、次のようになります。

<button type="submit" disabled={pristine || submitting || invalid} >Save</button>

しかし、私のアプリケーションでは、私の送信ボタンはフォームの外にある必要があり、アプリケーションの別の場所に配置する必要があります（アプリケーション全体の上部にあるアプリケーションヘッダーにあるとしましょう）。

  1. Redux-Form以外からこれらのpristine、submitting、invalidを取得するにはどうすればよいですか？ （可能であれば、本当に厄介なハッキングをせずに：-））
  2. どうすればそのフォームを送信できますか？
javascriptreactjsreduxredux-form
23
DHlavaty

同じフォーム名で別のコンポーネントを装飾するだけで、同じ状態変数にアクセスできます。また、親からonSubmit関数に渡して、現在のフォームインスタンスのHTMLではなく、すべてredux状態であるため、定義した場所からすべてのField値を送信できます。 （それは一種の「ハッキー」な方法ですが、それは正しいと感じます）

送信関数は、状態では共有されない親から定義されるため、インスタンスごとに異なるようにすることができます。

class MySubmitForm extends React.Component {
    render() {
        return (
            <button
                onClick={this.props.handleSubmit}
            >
                {this.props.pristine ? 'pristine' : 'changed'}
            </button>
        )
    }
}

export default reduxForm({
    form: 'myFormName'
})(MySubmitForm);
13
Robert Simon

redux-formはReact Reduxと連携して、HTMLフォームをReactで有効にしてReduxを使用してそのすべての状態を保存します。

「Reduxフォームの外」がまだアプリケーションをreduxすることを意味する場合、いくつかのアクションをディスパッチすることにより、これらのプロパティを状態に保存することができます。

フォーム：何が起こっているのか（無効な場合など）を検出し、アクションをディスパッチして状態を変更します。「外部」の部分では、適切なプロパティをコンポーネントに（必要なプロパティとともに）渡しており、それに依存しています。ボタンを無効にします。

4
MariuszJasinski

最新のredux-formバージョン6.0.2：

  1. セレクターを介してフォームの状態pristine、submitting、invalidにアクセスできます http://redux-form.com/6.0.2/docs/api /Selectors.md/

  2. redux-formアクションクリエーターをエクスポートすることが可能です http://redux-form.com/6.0.2/docs/api/ActionCreators.md/

3
Soson

多分あなたは_redux-forms_の Instance API を見ることができます。装飾されたフォームコンポーネントのインスタンスのsubmit()メソッドへのアクセスを提供します。 pristineブールプロパティとinvalidブールプロパティも使用できます（送信プロパティを公開するための request もあります）。

ここに例があります： http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 （例は5.3.1ですが、プロセスはインスタンスAPIを使用したv6と同様です）

基本的な考え方は、フォームに_ref="myExampleForm"_を追加することにより、_this.refs.myExampleForm_で渡すことができるということです。次に、インスタンスのプロパティを確認するか、submit()メソッド（または公開されているその他のメソッド）を呼び出します。

2
Samuel Bolduc

これを行うのが簡単になりました。ボタンのあるスタンドアロンコンポーネントで送信アクションを呼び出すことができます。

この例を参照してください： https://redux-form.com/7.1.2/examples/remotesubmit/

2
FerA320

フォームを送信するだけの場合は、redux connect（）関数に{withRef：true} option を指定する必要があります。

Rowから保存する必要のある情報を持つ子RowDetailコンポーネントを持つRowコンポーネントを検討してください。

RowDetailこの場合、次のように作成できます。

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

const RowDetailForm = reduxForm({form: 'row-detail-form'})(RowDetail);

export default connect(mapStateToProps, null, null, {withRef: true})(RowDetailForm);

次に、親コンポーネント（Row）で、ref属性を使用してフォームを作成します。

<RowDetailForm ref={'rowDetailForm'} .../>

今すぐ送信するのは「簡単」です。

onSave() {
  this.refs.rowDetailForm.getWrappedInstance().submit();
}

手付かずのフォームプロパティやその他のフォームプロパティについて話している場合は、parentコンポーネントのmapStateToProps関数から取得しようとすることができます。

const rowDetailFormName = 'row-detail-form';
const mapStateToProps = (state) => ({
  rowDetailForm: state.form[rowDetailFormName]
});

しかし、私はredux-form APIを理解しているため、すべてのフォームの状態に直接アクセスすることを意図していないため、この方法は少しハックに思えます。間違っている場合は修正してください

1
Misha K

私はこの問題に最近取り組む必要がありました。結局、フォームにコールバックを渡しました。これは、興味のあるプロパティが変更されるたびに呼び出されます。 componentDidUpdateライフサイクルメソッドを使用して、変更を検出します。

これは、ライブラリのどのバージョンでも機能するはずです。

これがサンプルコードの投稿です- http://nikgrozev.com/2018/06/08/redux-form-with-external-submit-button/

0
Nikolay