ant design 5x - Form 表单回显

最新推荐文章于 2024-08-24 11:02:35 发布

九层嵌套 for 循环

最新推荐文章于 2024-08-24 11:02:35 发布

阅读量725

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_72099243/article/details/130200301

文章讲述了在React中如何利用createRef和Form组件的ref属性实现表单的回显功能。通过设置定时器并在formRef上调用setFieldsValue方法，可以将数据映射到表单字段，实现点击后数据的即时显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先需要创建 ref 绑定到 form 表单身上

let formRef = React.createRef()

                <Form
                    name="nest-messages"
                    {...layout}
                    ref={formRef}
                    onFinish={onFinish}
                >

回显尽可能放在定时器中，如果可以在 form 表单拿到值之后去触发回显，也可以不放

  setTimeout(() => {
            formRef.current.setFieldsValue({
                tashName: record.taskName,
                date: record.beginTime,
                hospitalNumber: record.members,
                diseaseNumber: record.patientNum,
                selector: record.taskState,
            })
        }, 0);

这一步就是调用了 ref 中的 setFieldsValue 方法，把你当前点击的这一条数据映射在 Form 中。

时小记，终有成。