24

この質問はRedux Form v6.0.0に関するものです(この質問を書いている時点では v6.0.0-alpha.15 です)。

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

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

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

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

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

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

  1. それらを Redux-Form の外から取得するpristineにはどうすればよいですか? （可能であれば、本当に厄介なハッキングなしで:-)）submittinginvalid
  2. どうすればそのフォームを送信できますか?
4

7 に答える 7

4

redux-form は React Redux と連携して、React の html フォームが Redux を使用してすべての状態を保存できるようにします。

「Redux-Form の外側」が依然としてアプリケーションの redux を意味する場合は、いくつかのアクションをディスパッチすることで、これらのプロパティを状態に保存することを試みることができます。

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

于 2016-07-06T12:43:02.090 に答える
2

のインスタンス APIを見ることができるかもしれませんredux-forms。submit()装飾されたフォーム コンポーネントのインスタンスのメソッドへのアクセスを提供します。pristineBoolean プロパティとBoolean プロパティもinvalid使用できます (サブミット プロパティを公開する要求もあります)。

ここに例があります: http://redux-form.com/5.3.1/#/examples/submit-from-parent?_k=jgv0m4 (例は5.3.1用ですが、プロセスはv6で似ていますインスタンス API)

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

于 2016-07-06T14:15:09.727 に答える
1

フォームを送信するだけの場合は、redux connect() 関数に{withRef: true}オプションを指定する必要があります。

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

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

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

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

于 2016-08-23T05:11:52.743 に答える