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

Question

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

想象一下，当用户 select 下拉列表中的值为 '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 规范器、redux 表单实用程序等）

谢谢。

Answer 1

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

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

It always blocked by my validation method and clear operation is failed.

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

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

Answer 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()

Answer 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);

Answer 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: ''
});

Answer 6

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

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

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

Answer 7

我找到了更好的方法，

我们可以使用initializeRF的action creator。

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

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

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

Answer 8

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

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

Answer 9

对于功能组件，可以changeRF的功能。将 change 作为 props 传递给您的组件并像 change(Field_name, value)

一样使用它

例如：

import { reduxForm } from "redux-form";
const Screen = ({
    handleSubmit,
    change
}) => {
onChange = () => {
    change(Field_name, value)
}
return (
// Your code
)}

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

How to clear some fields in form - Redux-Form

reactjs

redux

redux-form