如何以 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 形式重置初始值的主要内容,如果未能解决你的问题,请参考以下文章
如何在单击重置时将 Material UI Autocomplete 重置为默认值/初始值?