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

【问题标题】：How to clear some fields in form - Redux-Form如何清除表单中的某些字段 - Redux-Form
【发布时间】：2016-09-08 11:06:41
【问题描述】：

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

想象一下，当用户从下拉列表中选择一个值作为“A”时，必须禁用某些字段，必须清除某些字段，并使用默认值初始化某些字段。我可以使用一些小代码来更改一个相关字段（没有像正则表达式或长度约束这样的验证规则）的值

  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 形式的输入分配一些值的最佳实践是什么。

我已经研究了 2 天，但找不到任何最佳解决方案。（redux normalizer、redux form utils 等）

谢谢。

【问题讨论】：

你在使用 immutable.js 吗？

标签： reactjs redux redux-form

【解决方案1】：

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

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

它总是被我的验证方法阻塞，清除操作失败。

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

【讨论】：

嗨，Erik，我用一些技巧解决了这个问题。不是理想的解决方案，但工作正常。我会根据您的建议改进它。
我将解释我是如何解决它的。请注意 untouch() 救了我。
这有点旧......目前我在 6.5.0 但我正在努力处理 untouch 调度。是否有如何调度 untouch() 动作的示例？即使我“更改”然后“取消触摸”字段，它们仍然被提交..
@Tugrul 我也遇到了同样的问题，尝试了下面的方法，都不管用，你能告诉我你是怎么做到的吗？

【解决方案2】：

这对我有用：

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

【讨论】：

【解决方案3】：

那里。

我们来看看http://redux-form.com/6.0.0-alpha.4/docs/faq/HowToClear.md/

对于整个表单，我们可以使用 4 种方法：

A) 您可以使用 plugin() API 来教 redux-form reducer 在您的提交成功时响应调度的操作。

B) 只需卸载表单组件

C) 提交成功后，您可以在表单内部调用 this.props.resetForm()。

D) 你可以从任何连接的组件调度 reset()

【讨论】：

【解决方案4】：

清除多个字段

import {change} from 'redux-form';

const fields = {name: '', address: ''};
const formName = 'myform';

const resetForm = (fields, form) => {
    Object.keys(fields).forEach(field => dispatch(change(form, field, fields[field])));
}

resetForm(fields,formName);

【讨论】：

【解决方案5】：

使用以下内容，它会清除相应的多个字段，并清除相应字段的错误（如果有）。

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

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

//reset the respective fields's value with the error if any
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: ''
});

【讨论】：

我就是这样做的。

【解决方案6】：

尝试使用具有以下负载的元对象中的调度功能：

meta.dispatch({
  type: '@@redux-form/CHANGE',
  payload: null,
  meta: { ...meta, field: name },
})

这应该可以解决您想要的任何字段。

【讨论】：

它有效，但为什么有效？您能指出我的任何参考资料或文档吗？
它之所以有效，是因为您直接为 redux-form 调度操作。如果你使用 redux-logger 作为中间件，你会看到 redux-form 会在后台调度什么。所以你可以自己派送。

【解决方案7】：

我找到了一个更好的方法，

我们可以使用initialize RF 的动作创建者。

let resetFields = {
    firstName: '',
    lastName: '',
    dateOfBirth: ''
}

this.props.initialize(resetFields, true); //keepDirty = true;

如果 keepDirty 参数为 true，则将保留当前脏字段的值以避免覆盖用户编辑。

【讨论】：

【解决方案8】：

如果我们正在讨论在表单中输入字段，然后在提交之前导航离开，这是最好的解决方案。将它放在您的 componentDidMount() 中，并带有您要清除的字段。

 this.props.initialize({
    firstName: null,
    lastName: null,
    bankRoutingNum: null,
    newBankType: null
  });

【讨论】：