Antd V4版本中Form resetFields无效

Antd V4版本中Form resetFields无效

技术杂谈小彩虹2021-07-13 3:10:1630A+A-

问题描述

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

原因

这是因为调用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>
        )
    }
}

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们