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);
  },
})

Answer 2

想要获得实时的数据要调用

this.props.form.getFieldValue("loginName")

毕竟这不是双向绑定