Redux表单-如何将字段设置为已触摸

我正在处理由多个页面组成的表单，我想解决验证问题

当我点击提交按钮时，当前页面上的所有字段都会在下方显示错误消息，但如果我更改页面，则需要再次点击提交，因为这些字段未设置为已触摸

例如，如果我可以将页面上的所有字段设置为touch，那么我的问题就可以解决了，只要表单有标志

anytouch:true

---

我使用的是

redux表单：“^6.0.0-rc.4”

，我有一个包含redux表单和多个由字段组成的组件的容器。

我应该看起来更好：

Redux表单将触摸作为道具返回到组件。该函数将字段名称作为参数，因此当

submitFailed

发生更改时，我将签入

componentWillUpdate

，然后我将触及所有无效字段

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

---

我想你的问题正好相反，但如果有人像我一样在这里登陆，我想在表单中的任何字段被触摸后设置

anytouch

在redux form 6及以上版本中您必须通过表单级配置

touchOnChange

和

touchOnBlur

-明确选择您想要的行为-默认情况下，没有任何配置，因此不会发生任何事情

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

---

这些标志使得当分别调用任何给定字段的

onChange

或

onBlur

处理程序时，该字段被标记为已触摸（因此表单上的

anytoucted

被标记为

true

）。这可以通过检查表单是否有效来实现

如果有效，您可以加载其他页面之一。 如果表单无效，请使用reduxFormsgetFormSyncErrors选择器，并将此对象返回的键传递给reduxFormtouch属性

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)

---

touchOnChange:true

…黄金