React Antd form.getFieldsValue() 和 form.getFieldsValue(true) 有区别吗？

最新推荐文章于 2024-06-13 10:54:16 发布
最新推荐文章于 2024-06-13 10:54:16 发布
阅读量1.3k 收藏
点赞数
分类专栏： 前端 文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Constantiny/article/details/132474749
版权
探讨了 React Antd 中 form.getFieldsValue 方法的不同用法，特别是传入 true 参数时的区别。getFieldsValue 不传参数时返回所有注册字段，传入 true 则获取 store 中包括未注册字段的所有值，而传入数组则按路径获取特定值。
摘要由CSDN通过智能技术生成

背景

突然发现 antd 的 getFieldsValue()是可以传一个 true 参数的，如题,React Antd form.getFieldsValue() 和 form.getFieldsValue(true) 有区别吗？

验证

确实不一样
在这里插入图片描述
在这里插入图片描述

结论

getFieldsValue 提供了多种重载方法：

getFieldsValue(nameList?: true | NamePath[], filterFunc?: FilterFunc)
当不提供 nameList 时，返回所有注册字段，这也包含 List 下所有的值（即便 List 下没有绑定 Item）。

当 nameList 为 true 时，返回 store 中所有的值，包含未注册字段。例如通过 setFieldsValue 设置了不存在的 Item 的值，也可以通过 true 全部获取。

当 nameList 为数组时，返回规定路径的值。需要注意的是，nameList 为嵌套数组。例如你需要某路径值应该如下：
在这里插入图片描述

zoe_ya
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
antd Form组件方法getFieldsValue获取自定义组件的值操作
01-18
自定义组件 1、自定义组件被getFieldsValue包裹，会获得以下属性 onChange方法, 子组件调用此方法，可将值传给父组件，从而Form可拿到自定义组件的值 value属性，获得初始值 2、组件调用 像Form表单内的组件一样调用，就可以了 补充知识：Ant Design Pro，用setFieldsValue方法，给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值 其实用setFieldsValue或者获取setState方法都可以设置DatePicker的默认值。 但是关键点在于，引用moment方法转换日期格式 1、setState方法
antd form.getFieldsValue(true)用法
Erya Programming learning
09-09 4985
在form组件中手动推入一个自定义属性，并获取
antd的select的defaultValue通过form.getFieldsValue获取不到
最新发布
我不写文章，我只是文章的搬运工
06-13 343
如果你希望在组件挂载后立即获取表单字段的值，可以在组件的。：如果你的默认值是异步获取的，确保在设置默认值后再渲染。组件已经初始化完成，并且所有字段都已经注册到表单中。确保你已经正确设置了这些属性。在使用Ant Design（简称antd）的。组件是一个受控组件，这意味着你需要使用。，这样在表单初始化时就会使用这个值。，可能会遇到一些问题。组件中，你可以设置每个字段的。组件的受控属性更新有关。：如果你在表单外部更改了。方法注册到表单中的，这样。组件时，如果你希望使用。
antd form表单的getFieldDecorator，validateFields，getFieldValue，setFieldsValue用法
续得木槿的博客
04-16 8354
1.getFieldDecorator getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。 <From> <Form.Item label="月份："> {getFieldDecorator('summaryDate', { initialValue: '', rules: [{ required: true, message
antd 表单通过form.getFieldsValue获取不全tabs组件下表单数据的问题
程展威的博客
10-24 2680
解决获取tabs下表单不全问题
useEffect 通过 form.getFieldValue(‘xxx‘) 监听 Form表单变化
二三的博客
03-08 4635
Form 内置方法，不是响应式的（即不是一个state），由其设置或者获取的值，不会触发UI更新，只能对变更的field进行刷新。想要对其进行监听也很简单，将其变成一个state即可。
[React] Antd Form getFieldValue 的使用、DatePicker 禁用日期 disabledDate
iChangebaobao的博客
06-06 2799
在表单中，有时需要根据表单项的不同选择，对下面的表单项进行不同的显示，也就是说，后面的表单项依赖于前面的表单项，这时是可以使用getFieldValue 获取依赖项的值进行判断，从而显示不同的内容 比如上面代码，当审核不通过原因选择其他时，显示一个 让用户填写 Antd 日期组件的选择比如某个表单项，只能选择某个日期之后的日期.........
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
react antd（基于npm webpack react）.zip
02-10
react antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact antd（基于npm webpack react）.zipreact...
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
react：https://react.nodejs.cn/reference/react/hooks antd：https://ant-design.antgroup.com/components/pagination-cn/ axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：...
Form 表单在数栈的应用(下)：深入篇
a958014226的博客
01-19 1034
这篇文章的主题为我们对 Form 表单在数栈产品中使用之后理解消化的一个过程，通过介绍一些 Form 表单中常用到的方法，来理解部分设计思想，加深我们对技术的追求。主要介绍 Form 表单的创建和 Form表单双向绑定（getFieldDecorator）。 后文中所提到的 Form 表单均为 Antd 3.x 中的 Form 组件，以下简称为 Form 表单。在 Form 表单在数栈的应用(上): 校验篇 中提到，我们生在一个最好的时代，其实是别人造好轮子帮我们做了一些事情，那我们今天看一看，别人的轮.
antd getFieldValue()参数值取决于
qq_44871531的博客
05-30 1899
如果你想获取form表单的某个a-form-item的值，可以通过getFieldValue()，通过设置参数列如：getFieldValue([‘uids’])获取数组，通过ds调用值，a-form-item 的key可以绑定多个字段，你要是想在getFieldValue([‘uids’])[“ds”]获取你想要的值，只需要在：:key=“item.xxx”,把xxx设置成你想要的字段即可 ...
java getfieldvalue_Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
weixin_32859127的博客
02-16 1666
Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法一、getFieldDecoratorgetFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去。//JS代码书写时需要用 { } 包裹起来，不能直接写在代码块中{get...
React 知识汲取篇 —— Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
风华流沙君莫笑的博客
12-02 2711
Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法 一、getFieldDecorator getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证规则。这个方法本身返回一个方法，需要将需要获取值的标签包裹进去 <From> <FormItem> //JS代码书写时需要用 { } 包裹起来，不能直接写在代码块中 {
react 父子传值_React学习——通过模态框中的表单学习父子组件之间传值
weixin_29246195的博客
12-30 478
import { button, modal, form, input, radio } from 'antd';const collectioncreateform = form.create({ name: 'form_in_modal' })(// eslint-disable-next-lineclass extends react.component {render() {const {...
java getfieldvalue_Java SolrDocument.getFieldValue方法代碼示例
weixin_34375356的博客
02-24 465
本文整理匯總了Java中org.apache.solr.common.SolrDocument.getFieldValue方法的典型用法代碼示例。如果您正苦於以下問題：Java SolrDocument.getFieldValue方法的具體用法？Java SolrDocument.getFieldValue怎麽用？Java SolrDocument.getFieldValue使用的例子？那麽恭喜您...
ant design getFieldDecorator、validateFields、getFieldsValue
热门推荐
旭旭1998的博客
09-15 6万+
export中添加 export default Form.create()(connect(({ TankManage }) => ({ TankManage }))(UpdateForm)); 从props中获取getFieldDecorator const { getFieldDecorator } = props.form; 使用方式 <Form.Item label="罐直径/米" >
reacthooks和antd form.submit校验自定义富文本框，输入内容提示立马消失
07-08
对于使用 React Hooks 和 Ant Design 的 Form 组件来进行自定义文本框的校验，输入内容立即消失的问题，你可以尝以下方法： 1. 使用 useState Hook 来踪输入框的值，并在输入框值生变化时更新状态。 2. Form 组件的 onFinish 回调函数中进行校逻辑。可以通过检查输入框的是否符合要求来决定是否提示错误信息。 3. 使用 Ant Design 的 message 组件来显示错误提示信息。可以校验失败时调 message.error() 方法来显示信息，并在校验成功时用 message.success() 方法消除提示信息。 以下一个示例代码： ```jsximport React, { useState 'react'; import { Form, Input, Button, message } from 'antd'; const MyCustomRichTextEditor = () => { const [content, setContent] = useState(''); const onFinish = (values) => { //行校验逻辑 if (content === '') { message.error('内容不能为空'); return; } // 校验通过，提交表单 // ... // 提示信息消失 message.success('提交成功'); }; return ( <Form onFinish={onFinish}> <Form.Item name="content" rules={[{ required: true, message: '请输入内容' }]} > <Input.TextArea value={content} onChange={(e) => setContent(e.target.value)} /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> ); }; export default MyCustomRichTextEditor; ``` 在上面的代码中，我们使用 useState 来追踪输入框的值，并在输入框值发生变化时更新状态。在 onFinish 回调函数中，我们进行了校验逻辑，如果发现内容为空，则使用 message.error() 方法显示错误信息，否则使用 message.success() 方法显示提交成功的提示信息。 希望这个示例能解决你的问题！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zoe_ya

如果你成功申请，可以打赏杯奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值