Antd V4版本中Form resetFields无效

简介: Antd V4版本中Form resetFields无效

问题描述

  • 给表单中的每一个表单项传入一个参数的时候,参数已经传进去了,但是initialValue并没有发生变化。

image.png

原因

这是因为调用resetFileds的时机不对,也就是生命周期的问题。

解决办法

  • 在生命周期函数componentDidUpdate中添加下面的代码即可。
componentDidUpdate() {
    if (this.formRef.current !== null) {
        this.formRef.current.resetFields();
    }
}

场景代码

export default class UpdateForm extends Component {
    formRef = React.createRef();
    static propTypes = {
        categoryName: PropTypes.string.isRequired
    }
    componentDidUpdate() {
        if (this.formRef.current !== null) {
            this.formRef.current.resetFields();
        }
    }
    render() {
        const { categoryName } = this.props;
        console.log(categoryName);
        return (
            <Form ref={this.formRef}>
                <Item initialValue={categoryName} name="categoryName" >
                    <Input placeholder="请输入分类名称" />
                </Item>
            </Form>
        )
    }
}


相关文章
|
缓存 资源调度
umi 解决找不到antd组件库中组件的路径问题 filePath not found of antd/es/float-button
umi 解决找不到antd组件库中组件的路径问题 filePath not found of antd/es/float-button
340 0
|
3月前
|
前端开发
antd_使用Input封装实现Form校验效果(最终版)
本文介绍了在Ant Design (antd)框架中如何封装Input组件以实现表单校验效果,并提供了封装代码示例以及如何在提交时进行校验。
98 4
antd_使用Input封装实现Form校验效果(最终版)
|
4月前
|
JavaScript
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
vue element-ui 中el-message重复弹出问题解决 el-message重复弹出解决办法
284 49
|
3月前
|
前端开发
antd_使用Input封装实现Form校验效果
本文介绍了如何在Ant Design (antd) 中使用 Input 组件封装实现表单校验效果,包括必填、数字、IP、邮箱、手机号、身份证号和域名等校验规则的使用,以及如何通过回调函数进行校验。
127 4
|
4月前
|
JavaScript 前端开发
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
这篇文章介绍了在Vue框架中使用Element UI组件库时,如何通过v-if指令和v-model绑定来控制`el-form-item`的显示与隐藏,以及如何通过设置`readonly`属性让输入框变为只读状态。
怎样在vue中隐藏el-form-item中的值、设置输入框的值是只读
|
5月前
|
JavaScript
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
element-ui 在vue中el-input输入框的autofocus属性失效【解决方案】
293 1
|
5月前
|
JavaScript
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
75 0
|
JavaScript
vue中关于element的el-image 图片预览功能增加一个下载按钮
vue中关于element的el-image 图片预览功能增加一个下载按钮
1007 0
|
7月前
|
数据库
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?
|
JavaScript
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
vue项目在点击重复路由时报错(NavigationDuplicated: Avoided redundant navigation to current location)
128 2