Question

我使用的是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" />

由于

Answer 1

TLDR：在表单上设置enableReinitialize: true

我最近遇到了同样的问题并遇到过这篇文章，没有任何答案有效。终于找到了解决方案，希望这对其他人有帮助。问题是重置表单时没有重置的初始值。这是一个github issue询问它，这是关于它的current documentation

Answer 2

Harsha的回答是正确的，但您也可以从已装饰的表单组件中调用已知道您的表单名称的this.props.reset()。

您可以在Simple Example。

中的“清除值”按钮上看到它

Answer 3

import {reset} from 'redux-form';

...

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

Answer 4

按清除按钮的onClick时，将调用以下不同功能。

onClick={this.onClearChanges}

以这种方式将initialValues传递给该函数，正如大家所提到的，不要忘记设置enableReinitialize：true。

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

Answer 5

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

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

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

在第一个处理特定Redux表单的组件内部，然后设置

enableReinitialize: true

该表格。

如何以redux格式重置初始值

5 个答案: