如何以 redux 形式重置初始值答案

【问题标题】：How to reset initial value in redux form如何以 redux 形式重置初始值
【发布时间】：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" />

谢谢

【问题讨论】：

标签： reactjs redux redux-form

【解决方案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

对于那个表格。

【讨论】：