一、函数中设置数据回显，使用useForm

操作如下：https://blog.csdn.net/Welkin_qing/article/details/110004969

（1）使用useForm

使用form可以使用antd的setFieldsValue

const [form] = Form.useForm()
const requestProfileList = useCallback(async () => {try {const { result } = await fetchProfileListRequest()form.setFieldsValue(result)} catch (e) {message.error(e)}}, [])

（2）在form表单中定义form

//表单提交
const handleOnFinish = useCallback((value) => {//拿到数据console.log(value)},[])<Form layout="horizontal" onFinish={handleOnFinish} form={form}>
</Form>

二、不使用useForm

<FormclassName={styles['form-container']}onFinish={handleSubmit}initialValues={{ log_id: 'lca.log' }} //设置数据回显
><div className={styles['form-container__keyIn']}>//设置规则<Form.Item name="log_id" rules={[{ required: true, message: '请选择日志' }]}><Selectplaceholder="选择日志"disabled={disable || switch_info.logSwitch}defaultActiveFirstOption>{LOG_INFO.map((item, index): JSX.Element => {return (<Option value={item.value} key={index}>{item.label}</Option>);},)}</Select></Form.Item></div></form>

Antd4之form表单数据回显相关推荐

antd 的form 表单怎么回显数据_jsonschema-form-vue基于JSONSchema的表单自动生成方案
现象作为一名前端开发,「表单开发」是我们的家常便饭,一般我们需要做以下重复性工作: 编写模板编写校验规则 * 获取数据,提交表单同时,后台服务也需要编写校验规则,随着业务变动或者沟通不及时,前后 ...
一行代码回显 LayUI表单数据回显下拉列表select回显
第一步: 要在回显的form表单上面加一个lay-filter属性放在下面以便复制 lay-filter的值可改为自己想要的 <form class="layui-form&q ...
小程序将form表单数据写入云数据库
小程序将form表单数据写入云数据库  <view class='forms'><form bind ...
html post请求渲染,FastAPI框架入门基本使用, 模版渲染, form表单数据交互, 上传文件, 静态文件配置...
安装 pip install fastapi[all] pip install unicorn 基本使用(不能同时支持,get, post方法等要分开写) from fastapi import Fa ...
ajax提交form表单到php,ajax如何提交form表单数据？ajax提交form表单数据的方法介绍...
对于form表单数据的提交,我们一般都会想到使用ajax提交,那么,ajax如何来提交form表单数据呢?接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法,有需要的伙伴可以参考一下 ...
html form表单数据转为json传输
html form表单数据转为json传输 from 表单 <form id="form1" name="form1" method="post ...
form表单数字校验（二）——邮箱校验-当前页面
form表单数字校验(二)--邮箱校验-当前页面效果代码 index.vue <el-form-item v-if='!isDisabled' label='邮箱'><el-in ...
ajax提交form表单数据_[基础编程学习] [PHP7数组详解]：第2章（1）从表单提交数据说起...
读完本章节内容,您能得到以下知识: 定义和使用数组创建表单,并验证表单提交的数组创建简单的数组结构操作简单数组的值遍历数组结构将表单数据存入数组存入数组之前进行数据验证 # 2.1 为什么 ...
elementui 下拉框回显_element-ui 中el-select表单不回显和校验不通过的问题
项目中有一个需求,填写表单,有两个相关联的下拉框,要根据部门筛选部门内的人员当部门切换时,清空负责人里的内容一开始的写法 v-for="(item,i) in getDepartment ...

Antd4之form表单数据回显

文章目录

一、函数中设置数据回显，使用useForm

（1）使用useForm

（2）在form表单中定义form

二、不使用useForm

Antd4之form表单数据回显相关推荐

最新文章

热门文章