转自：https://blog.csdn.net/welkin_qing/article/details/110004969

文章目录

一、antd4如何回显数据
- 1. 定义变量
- 2. 保存接口数据到form变量中
- 3. form显示数据
- 4. 表单提交数据 onFinish
二、antd3如何回显数据
- 1. 引入FormComponentProps
- 2. 设置interface
- 3. 设置组件
- 4. 定义getFieldDecorator和setFieldsValue
- 5. 使用getFieldDecorator实现数据双向绑定
- 6.设置默认值
- 7. 表单提交onSubmit

一、antd4如何回显数据

1. 定义变量

const [form] = Form.useForm()

2. 保存接口数据到form变量中

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

3. form显示数据

在Form.item中只要把name属性确定好就OK

<Form layout="horizontal" onFinish={handleOnFinish} form={form}>
</Form>

4. 表单提交数据 onFinish

const handleOnFinish = useCallback((value) => {//拿到数据console.log(value)},[])

二、antd3如何回显数据

1. 引入FormComponentProps

import { FormComponentProps } from 'antd/lib/form';

2. 设置interface

//定义form 数据
export interface FormData {name: string;account: string;number: string;
}
interface ComponentProps extends FormComponentProps {onSubmit(value?: FormData): void;
}

3. 设置组件

const FilterForm: FC<ComponentProps> = ({ form, onSubmit }) => {
}

4. 定义getFieldDecorator和setFieldsValue

const { getFieldDecorator, setFieldsValue } = form;

5. 使用getFieldDecorator实现数据双向绑定

 <Form.Item label={'姓名'}>{getFieldDecorator('name')(<Inputprefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}style={{ width: 145 }}placeholder="请输入员工姓名"/>,)}
</Form.Item>

6.设置默认值

 <Form.Item label={'姓名'}>{getFieldDecorator('name', {initialValue:  '张三',})(<Inputprefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}style={{ width: 145 }}placeholder="请输入员工姓名"/>,)}
</Form.Item>

7. 表单提交onSubmit

  //提交表单const handleSubmit: React.FormEventHandler<HTMLFormElement> = (e): void => {e.preventDefault();form.validateFields((err, values) => {if (!err && onSubmit) {//通过onSubmit传递给父组件onSubmit(values);}});};

React之antd Form回显数据相关推荐

ElementUI中el-radio-group使用v-model绑定是属性为String字符串类型时不回显数据
场景结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-ra ...
ElementUI中的el-select中多选回显数据后没法重新选择和更改
场景 ElementUI的el-select怎样实现下拉多选并实现给下拉框赋值和获取值: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】...
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】(修订版)...
前言只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 什么是EL表达式? 表达式语言(Expression ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
JSP第四篇【EL表达式介绍、获取各类数据、11个内置对象、执行运算、回显数据、自定义函数、fn方法库】... 1
什么是EL表达式? 表达式语言(Expression Language,EL),EL表达式是用"${}"括起来的脚本,用来更方便的读取对象! EL表达式主要用来读取数据,进行内容的 ...
layer.open回显数据select选择默认值
1. 需求分析如图所示,需要在用户编辑的时候能够回显数据,并且使其能够自动渲染下拉框. <div class="layui-form-item"><label ...
vue页面回显数据_解决vue表单回显数据无法修改的问题
前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改项目环境:springboot+vue前后端分离问题:修改操作数据回显无法输入值一.问题截图二. ...
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决)
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) 参考文章: (1)vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) (2)ht ...

React之antd Form回显数据

转自：https://blog.csdn.net/welkin_qing/article/details/110004969

文章目录

一、antd4如何回显数据

1. 定义变量

2. 保存接口数据到form变量中

3. form显示数据

4. 表单提交数据 onFinish

二、antd3如何回显数据

1. 引入FormComponentProps

2. 设置interface

3. 设置组件

4. 定义getFieldDecorator和setFieldsValue

5. 使用getFieldDecorator实现数据双向绑定

6.设置默认值

7. 表单提交onSubmit

React之antd Form回显数据相关推荐

最新文章

热门文章