如何清除表单中的某些字段 - Redux-Form

Question

我在一个页面上工作,该页面上有许多输入验证和逻辑绑定,每次迭代都会增加页面大小.所以,我必须找到一个漂亮且可扩展的解决方案.

想象一下,当用户从下拉列表中选择一个值为"A"时,必须禁用某些字段,必须清除某些字段,并使用默认值启用某些字段.我可以改变一个相关的字段(没有像regexp或lenght constrait这样的验证规则)值和一些像

  this.props.dispatch(change('xForm','xField','xValue' ))

我的问题是,当我需要清除多个字段时,

它始终被我的验证方法阻止,并且清除操作失败(注意:我应该是那样但不是那样)

.

我尝试了一些策略如下,但是y,z,w字段有一些文本,它触发了验证规则和处理错误.因此,输入仍然是旧值,而不是清除值.

    //Clear    
    this.props.dispatch(change('xForm','yField','' ))
    this.props.dispatch(change('xForm','zField','' ))
    this.props.dispatch(change('xForm','wField','' ))

清晰输入的最佳实践是什么,或者为具有高度依赖输入的页面以redux-form为输入分配一些值.

我已经研究了2天但我找不到任何最佳解决方案.(redux normalizer,redux form utils等)

谢谢.

Answer 1

这对我有用:

resetAdvancedFilters(){
        const fields = ['my','fields','do','reset','properly']
        for (var i = 0; i < fields.length; i++) {
            this.props.dispatch(change('formName',fields[i],null))
            this.props.dispatch(untouch('formName',fields[i]))
        }
    }

Answer 2

使用下面的内容,它会清除相应的多个字段,并清除相应字段的错误(如果有的话).

重置多个字段的常用功能.

import {change, untouch} from 'redux-form';

//reset the respective fields's value with the error if any after
resetFields = (formName, fieldsObj) => {
      Object.keys(fieldsObj).forEach(fieldKey => {

          //reset the field's value
          this.props.dispatch(change(formName, fieldKey, fieldsObj[fieldKey]));

          //reset the field's error
          this.props.dispatch(untouch(formName, fieldKey));

      });
}

使用上面的常用功能,

this.resetFields('userDetails', {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
});

Answer 3

哇，这是一些复杂的逻辑。绝对理想的方法是在其他字段值更改时使用plugin()API更改化简器中的值。这是一个复杂的API，因为您可以完全控制在reducer中处理问题，但是您有一个复杂的要求。

但是，change()像您说的那样分派三个动作也可以正常工作。untouch()如果这些字段具有Required您不想显示的验证消息，则可能也需要/需要这些字段。

它始终被我的验证方法阻止，清除操作失败。

您能否详细说明这是什么意思，显示堆栈跟踪或控制台错误输出？