猿问

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

题目描述

我在做项目的时候发现 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事件,因为比较多


牛魔王的故事
浏览 12383回答 1
1回答

MMMHUHU

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

相关分类

JavaScript
我要回答