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