如何以 redux 形式重置初始值

Posted

技术标签:

【中文标题】如何以 redux 形式重置初始值【英文标题】:How to reset initial value in redux form 【发布时间】:2017-07-31 09:24:38 【问题描述】:

我正在使用 redux-form。我在状态的输入字段中显示初始值。 当我点击重置时,输入字段仍然显示初始值。

如何重置输入框?

这是我的代码:

const mapStateToProps = (state) => 
    return 
        initialValues: 
            name:state.userInfo.data.name,
            email:state.userInfo.data.email,
            phone:state.userInfo.data.phone,
            city:state.userInfo.data.city.name,
        
    ;

这就是我在输入字段中调用初始值的方式。

const renderField = ( input, label, type, meta:  touched, error  ) => (
    <div>
        <input className="form-control control_new" ...input placeholder=label type=type/>
    touched && ((error && <span>error</span>))
    </div>
)

<Field type="text" ...name name="name" component=renderField label="Enter Your Name" />

谢谢

【问题讨论】:

【参考方案1】:
import reset from 'redux-form';

...

dispatch(reset('myForm'));  // requires form name

【讨论】:

【参考方案2】:

Harsha 的回答是正确的,但你也可以从你的装饰表单组件内部调用this.props.reset(),它已经知道你的表单名称。

您可以在Simple Example 中的“清除值”按钮上看到它的实际效果。

【讨论】:

如果你通过initialValues,这似乎不起作用。表单保留旧的初始值,然后切换到新的。【参考方案3】:

TLDR:在您的表单上设置enableReinitialize: true

我最近遇到了同样的问题,遇到了这篇文章,但没有一个答案有效。终于找到了解决方案,所以希望这对其他人有帮助。问题是当您重置表单时那些初始值没有被重置。这是github issue 询问它,这是current documentation 询问它

【讨论】:

赞美你,先生。赞美你。 有同样的问题,这解决了它。谢谢! 我认为这确实应该是公认的答案。【参考方案4】:

在清除按钮的 onClick 上调用不同的函数,如下所示。

onClick=this.onClearChanges

以这种方式将initialValues传递给函数,正如大家所说,不要忘记设置enableReinitialize:true。

onClearChanges = () => 
  const  reset, onClearChanges, InitialValues  = this.props;
  reset();
  onClearChanges(InitialValues);
;

【讨论】:

【参考方案5】:

如果您没有带有可调用方法的按钮,也可以在构造函数内部进行重置。

我正在使用 Drawer Navigator 导航到不同的屏幕(不是带有 onClick 方法的可点击按钮),所以我不得不重置

constructor(props) 
  super(props);
  this.props.reset(); //<-- this

在第一个组件内部处理特定的 redux 表单,然后我设置

enableReinitialize: true 

对于那个表格。

【讨论】:

以上是关于如何以 redux 形式重置初始值的主要内容,如果未能解决你的问题,请参考以下文章

在redux中按下重置按钮时如何初始化所有状态

在 redux 形式的文本字段中设置初始值

如何在单击重置时将 Material UI Autocomplete 重置为默认值/初始值?

[Redux/Mobx] Redux怎样重置状态?

我们如何在 useState 中使用 redux state 来设置初始值

如何在 react native 中使用选择器从 redux 状态设置 usestate 的初始值?