Antd模态框Modal内部组件数据回显

<Modal
   title="修改菜单"
   visible={isShowEdit}
   onCancel={()=>{
     this.setState({isShowEdit:false})
   }}
   footer={null}
    >
    <EditForm
      menu={menu}
      handleCancel={()=>{
      this.setState({isShowEdit:false})
    }}
   />
</Modal>

这里的Modal里面有一个叫EditForm的组件,并给EditForm的组件传入了menu属性。EditForm组件是一个Form表单,那么如何实现在EditForm的组件里面实现数据回显呢?
解决方法:在EditForm组件的componentDidMount阶段和componentDidUpdate阶段做数据回显

formRef = React.createRef(); 
componentDidMount(){
        const {name,title} = this.props.permission
        this.formRef.current.setFields([
            {name:"name",value:name},
            {name:"title",value:title},
        ]);
    }
    componentDidUpdate() {
        const {name,title} = this.props.permission
        this.formRef.current.setFields([
            {name:"name",value:name},
            {name:"title",value:title},
        ]);
    }
    render() {
        const {permission} = this.props
        const formItemLayout = {
            labelCol: { span: 7 }, //左侧label的宽度
            wrapperCol: { span: 15 },//右侧包裹的宽度
        }
        return (
            <Form name="edit_form" 
            onFinish={this.onFinish}
            ref={this.formRef}>
                <Form.Item
                    {...formItemLayout}
                    name="title"
                >
                    <Input ></Input>
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="name"
                >
                    <Input></Input>
                </Form.Item>
            </Form>
        )
    }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值