IT技术 - 如何以redux形式重置初始值 - 吾爱随笔录

如何以redux形式重置初始值

IT技术 reactjs redux redux-form

2021-05-12 02:26:45

我正在使用 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" />

谢谢

4个回答

import {reset} from 'redux-form';

...

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

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

您可以在Simple Example 中的“Clear Values”按钮上看到它的作用。

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

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

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

onClick={this.onClearChanges}

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

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

其它你可能感兴趣的问题

上一篇寻找基本晶体结构的CAD文件下一篇React.default.memo 不是函数 (React-Native) wrapWithConnect