报错The above error occurred in the <InnerPicker> component:解决方法和Ant Design form表单setFieldValue修改input

简介: 报错The above error occurred in the <InnerPicker> component:解决方法和Ant Design form表单setFieldValue修改input

1.时间管理器值的格式,

Ant Design DatePicker 日期选择框

它的value格式为

我们获取的时间

直接将或的获得时间不经过处理就会出现下面这种状况,报错

The above error occurred in the <InnerPicker> component:

这说明我们的传值格式不对

官方文档 日期选择框 DatePicker - Ant Design

日期格式

使用 format 属性,可以自定义日期显示格式。当 format 为数组时,选择器输入框可以输入数组中任意一个有效格式。

引入所需组件

设置接受数据

 

这样就可以了

  1. Ant Design在form的input框中赋值。
    因为,
  2. 所以我们可以使用以下方法实现效果


  3. setFieldValue可以多次修改值,initialvalue,只能实现一次所以我们使用setFieldValue。


  4. 或者在Form.Item中写一个标签设置隐藏在其中传入要传的值也可让input中出现要的值

不过不能使用表单校验,否则会报错

arning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see

这个警告通常出现在 Form.Item 组件的 name 属性没有一个单独的子元素时。Form.Item 期望只包含一个子元素,并使用 name 属性来关联表单字段的值。

说明Form.Item有两个元素,校验识别不出就会使校验出错

相关文章
Maximum call stack size exceeded报错的原因及解决办法
Maximum call stack size exceeded报错的原因及解决办法
4438 0
|
11月前
|
存储 安全 JavaScript
如何使用Set的delete()方法删除元素?
如何使用Set的delete()方法删除元素?
766 122
|
前端开发 安全 测试技术
前端组件化有什么优势?
【10月更文挑战第4天】
846 156
|
运维 Cloud Native Java
postman发起post请求遇到报错:java.io.FileNotFoundException (文件名、目录名或卷标语法不正确。)
遇到bug报错,多猜可能的原因,控制变量反复测试,直至找到问题的关键,然后再思考如何解决或者回避。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来
antd table合并行或者列(动态添加合并行、列)
在Ant Design的Table组件中实现行或列的合并,通过动态计算数据源中的`rowSpan`或`colSpan`属性来控制,支持对特定字段进行行或列合并,包括多选框列的合并处理。
2412 3
antd table合并行或者列(动态添加合并行、列)
|
前端开发 开发者
useContext 钩子详解
【10月更文挑战第14天】`useContext` 是 React 中的一个 Hook,用于在组件树中传递数据,避免手动传递 props。本文从基本概念、使用方法、常见问题及解决方法等方面详细介绍了 `useContext`,并提供了代码示例,帮助开发者更好地理解和应用这一钩子。
642 6
ant-design 设置Form.Item中的input框的值的方法
ant-design 设置Form.Item中的input框的值的方法
1072 0
|
JSON 前端开发 数据格式
JSON.parse 数值类型精度丢失
JSON.parse 数值类型精度丢失
|
前端开发 JavaScript UED
axios取消请求CancelToken的原理解析及用法示例
axios取消请求CancelToken的原理解析及用法示例
1572 0
|
JavaScript 前端开发 编译器
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧
Typescript 回调函数、事件侦听的类型定义与注释--拾人牙慧

热门文章

最新文章