23

我正在处理一个页面，该页面上有许多输入验证和逻辑绑定，并且每次 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 等）

谢谢。

4

8 回答 8

16

这对我有用：

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]))
        }
    }
于 2017-03-15T02:47:37.600 回答
11

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

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

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: ''
});
于 2017-09-25T07:29:39.323 回答
5

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

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

它总是被我的验证方法阻止并且清除操作失败。

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

于 2016-05-16T15:07:22.990 回答
1

我为此找到了更好的方法，

我们可以使用RF 的初始化动作创建者。

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

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

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

于 2018-02-17T14:47:25.773 回答
1

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

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

这应该可以解决您想要的任何领域。

于 2017-12-07T10:59:11.983 回答
1

那里。

让我们看看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()

于 2017-05-27T20:35:11.120 回答
0

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

 this.props.initialize({
    firstName: null,
    lastName: null,
    bankRoutingNum: null,
    newBankType: null
  });
于 2019-10-02T23:38:01.933 回答
0

清除多个字段

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);
于 2017-07-27T04:05:15.107 回答