antd initialValue 的值改变不重新渲染 清空输入的表单数据

Question

题目描述

我在做项目的时候发现 antd initialValue 的值改变了 输入的表单数据并不会随之变化 
当我这样操作把searchFormData.loginName的值改变 initialValue: searchFormData.loginName, 原来输入的表单数据并不会清空 更新
奇怪的是当我这样写initialValue: Math.random(), 数据又会更新

现在我又一个刷新页面的操作的需求 但是又没有用到路由 
刷新页面是一个全局按钮 我把这里的state全部清空 来实现刷新的操作

但是即使state为空了 已经输入的表单的内容 并不会清空 而p标签的内容已经清空

题目来源及自己的思路

我的刷新操作是在顶级组件上操作的，所以没办法调用子孙级别的 this.props.form.resetFields(); 方法去清空

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<p>{searchFormData.loginName}</p>

<FormItem label="登录名称" {...formItemLayout}>
    {getFieldDecorator('loginName', {
      initialValue: searchFormData.loginName,
    })(
      <Input defaultValue={searchFormData.loginName} />
    )}
</FormItem>

你期待的结果是什么？实际看到的错误信息又是什么？

我希望 当我把 state 清空 input里面原来输入的内容也清空掉， 但是我不想用每个input去写onchang事件，因为比较多

Answer 1

通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到上层组件或者 Redux、dva 中，更多可参考 rc-form 示例。注意：mapPropsToFields 里面返回的表单域数据必须使用 Form.createFormField 包装。Form.create({   onFieldsChange(props, changedFields) {    props.onChange(changedFields);   },   mapPropsToFields(props) {    return {       username: Form.createFormField({         ...props.username,         value: props.username.value,       }),     };   },   onValuesChange(_, values) {     console.log(values);   }, })