web-dev-qa-db-ja.com

Reduxフォーム-タッチされたフィールドを設定する方法

複数のページで構成されるフォームを使用していて、検証を解決したいと考えています。

[送信]ボタンを押すと、現在のページのすべてのフィールドの下にエラーメッセージが表示されますが、ページを変更すると、これらのフィールドがタッチされたものとして設定されていないため、もう一度[送信]を押す必要があります。

フォームにフラグanyTouched: trueが付けられたら、たとえばページ上のすべてのフィールドをタッチされたものとして設定できれば、私の問題は解決されます。

redux-form: '^6.0.0-rc.4'を使用していて、redux-formとフィールドで構成される複数のコンポーネントを含む1つのコンテナーがあります。

reduxreact-reduxredux-form
7
Jan Omacka

私はもっ​​と良く見えるべきだった：

Reduxフォームは、タッチを小道具としてコンポーネントに返します。この関数はフィールドの名前をパラメーターとして受け取るので、componentWillUpdateがいつ変更されるかをsubmitFailedでチェックインしてから、無効なすべてのフィールドにタッチします。

componentWillUpdate(nextProps) {
    const {
      formName: { syncErrors },
      submitFailed,
      touch
    } = this.props

    if (submitFailed !== nextProps.submitFailed) {
      const toTouch = []

      for (const key in syncErrors) {
        syncErrors.hasOwnProperty(key) && toTouch.Push(key)
      }
      touch(...toTouch)
    }
  }
6
Jan Omacka

あなたの問題は逆だったと思いますが、フォームのフィールドに触れた後にanyTouchedを設定する方法を探していたので、誰かがここに着陸した場合に備えて...

redux-form 6以降では、フォームレベルの構成touchOnChangeおよびtouchOnBlur - ここのドキュメントを参照 -デフォルトでは何も設定されていないため、何も起こりません。

const Form = reduxForm({
  form: 'my-form',
  touchOnChange: true,
  touchOnBlur: true
})(...)

これらのフラグにより​​、特定のフィールドがanyTouchedまたはtrueの場合、任意のフィールドがタッチ済みとしてマークされます（したがって、フォーム上でonChangeはonBlurとマークされます）。ハンドラーがそれぞれ呼び出されます。

16
davnicwil

Redux形式7.4.2。これは、フォームがvalidであるかどうかを確認することで実現できます。

有効な場合は、他のページの1つをロードできます。フォームが無効な場合は、reduxForms getFormSyncErrorsセレクターを使用して、このオブジェクトから返されたキーをreduxForm touchプロパティに渡します。

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

class MyComponent extends Component {

  ...

  this.props.valid ? 
    // navigate away 
    : this.props.touch(...Object.keys(this.props.formErrors))

  ...

}

function mapStateToProps(state) {
  return {
    formErrors: getFormSyncErrors('myForm')(state)
  }
}

export default compose(
  connect(mapStateToProps, null),
  reduxForm({form: 'myForm'})
)(MyComponent)
0
JSON C11