【Antd】Form 表单获取不到 Input 的值

news/发布时间2024/5/14 10:10:22

文章目录

今天遇到了一个奇怪的bug,Form表单中的Input组件的值,不能被Form获取,导致输入了内容,但是表单提交的时候值为undefined

  • 报错代码
import { Button,  Form, Input } from 'antd';
import React from 'react';const App: React.FC = () => {const onFinish = ({desc) => {console.log('desc:', desc);	// undefined};return (<Formname="basic"labelCol={{ span: 8 }}wrapperCol={{ span: 16 }}onFinish={onFinish}><Form.Item label="描述:" name="desc"><Input.TextArea  />,</Form.Item><Form.Item><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Form>);
};
  • 不知道大家看上面的报错示例是否一眼就看出问题了,没看出来没关系,我来解释一下
<Form.Item label="描述:" name="desc"><Input.TextArea  />,
</Form.Item>
  • 是的,没错,就是<Input.TextArea />右边多了个符号(,)导致的
  • 因为Form.ItemInput之间不能有其他多余内容
  • 比如:这样也是不行的,之间多了一层div结构什么的
<Form.Item label="描述:" name="desc"><div><Input.TextArea  /></div>
</Form.Item>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.bcls.cn/IVcZ/5115.shtml

如若内容造成侵权/违法违规/事实不符,请联系编程老四网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

五种多目标优化算法(MOGWO、MOJS、NSWOA、MOPSO、MOAHA)性能对比,包含6种评价指标,9个测试函数(提供MATLAB代码)

一、5种多目标优化算法简介 1.1MOGWO 1.2MOJS 1.3NSWOA 1.4MOPSO 1.5MOAHA 二、5种多目标优化算法性能对比 为了测试5种算法的性能将其求解9个多目标测试函数&#xff08;zdt1、zdt2 、zdt3、 zdt4、 zdt6 、Schaffer、 Kursawe 、Viennet2、 Viennet3&#xff09;&#xff0…

电脑丢失vcruntime140.dll文件有哪些办法可以解决,关于vcruntime140.dll文件丢失的问题

一.vcruntime140.dll丢失会造成什么问题&#xff1f; 1. 程序无法启动&#xff1a;当vcruntime140.dll丢失时&#xff0c;可能会导致某些依赖该文件的程序无法正常启动&#xff0c;从而影响我们的正常使用。 2. 程序运行异常&#xff1a;即使程序能够启动&#xff0c;vcruntim…

Eclipse的Java Project的入口main函数

在使用Eclipse创建java project项目的时候&#xff0c;一个项目里面通常只有一个main&#xff0c;那么一个项目里面是否可以有多个main函数呢&#xff1f;其实可以的&#xff0c;但是运行java application的时候要选择执行哪个main函数。 下面举个例子&#xff1a; 1、创建一个…

电脑开机蓝屏错误代码c000021a怎么办 电脑蓝屏报错c000021a的解决办法

很多小伙伴在电脑开机的时候出现蓝屏代码c000021a都不知道该怎么去解决&#xff0c;所以今天就给你们带来了c000021a蓝屏解救方法&#xff0c;如果你还没解决的话就快来看看吧。 解决办法&#xff1a; 原因&#xff1a; c000021a蓝屏的原因有很多&#xff0c;主要有以下几种…

unity学习(34)——角色选取界面(跨场景坑多)

先把SelectMenu中的camera的audio listener去掉。 现在还是平面&#xff0c;直接在camera下面添加两个panel即可&#xff0c;应该是用不到canvas了&#xff0c;都是2D的UI。 加完以后问题来了&#xff0c;角色选择界面的按钮跑到主界面上边了&#xff0c;而且现在账号密码都输…

复数 笔记 (1)

概念 形如&#xff08;&#xff0c; 均为实数&#xff09;的数为复数&#xff08;&#xff09;&#xff0c;其中&#xff0c; 被称为实部&#xff08;&#xff09;&#xff0c; 被称为虚部&#xff08;&#xff09;&#xff0c; 为虚数单位。复数通常用 表示&#xff0c;即 &…

Python 潮流周刊#39:Rust 开发的性能超快的打包工具

△△请给“Python猫”加星标 &#xff0c;以免错过文章推送 你好&#xff0c;我是猫哥。这里每周分享优质的 Python、AI 及通用技术内容&#xff0c;大部分为英文。本周刊开源&#xff0c;欢迎投稿[1]。另有电报频道[2]作为副刊&#xff0c;补充发布更加丰富的资讯&#xff0c;…

【黑马程序员】3、TypeScript常用类型_黑马程序员前端TypeScript教程,TypeScript零基础入门到实战全套教程

课程地址&#xff1a;【黑马程序员前端TypeScript教程&#xff0c;TypeScript零基础入门到实战全套教程】 https://www.bilibili.com/video/BV14Z4y1u7pi/?share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 目录 3、TypeScript常用类型 3.1 类型注解 …

C#与VisionPro联合开发——链接相机

联合开发 在Visual Studio 2022中引入visionpro的控件 下面的示例是在winform中实现了相机的链接、拍照功能、读取本地图片功能、保存图片功能、显示相机的实时画面功能&#xff0c;和设置相机的曝光值。 引入命名空间 using Cognex.VisionPro; //图像操作的命名空间 using…

如何解决Nginx启动出现闪退问题?

哈喽&#xff0c;大家好&#xff0c;我是小浪。那么大家首次在启动nginx的时候&#xff0c;绝大部分同学会出现以下情况&#xff0c;就是我们双击nginx.exe文件之后&#xff0c;屏幕闪退一下就没了&#xff0c;然后我们访问localhost:8080提示404. 那么出现这种情况其实是我们…

力扣--双指针167.二数之和Ⅱ

这题一个穷举方法是比较好想到的&#xff1a; class Solution { public:vector<int> twoSum(vector<int>& numbers, int target) {int i,j;int nnumbers.size();vector<int>result(2,0);for(i0;i<n-1;i){for(ji1;j<n;j){if(numbers[i]numbers[j…

C/C++文件操作

一、文本文件操作 1、写文件操作 代码 #include<fstream> #include<iostream>int main() {ofstream outfile("Student.txt", ios::out);if (!outfile) {cout << "文件写入失败" << endl;exit(0); //程序终止}cout << &qu…

Python爬虫技术详解:从基础到高级应用,实战与应对反爬虫策略【第93篇—Python爬虫】

前言 随着互联网的快速发展&#xff0c;网络上的信息爆炸式增长&#xff0c;而爬虫技术成为了获取和处理大量数据的重要手段之一。在Python中&#xff0c;requests模块是一个强大而灵活的工具&#xff0c;用于发送HTTP请求&#xff0c;获取网页内容。本文将介绍requests模块的…

SQL 练习题目(入门级)

今天发现了一个练习SQL的网站--牛客网。里面题目挺多的&#xff0c;按照入门、简单、中等、困难进行了分类&#xff0c;可以直接在线输入SQL语句验证是否正确&#xff0c;并且提供了测试表的创建语句&#xff0c;也可以方便自己拓展练习&#xff0c;感觉还是很不错的一个网站&a…

ad如何生成gerber文件

1 2 3 4 5 6 7 8![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f576afa92b054a5ca68bc383a4c3c27d.png#pic_ce 8 9 10

深拷贝与浅拷贝

在JavaScript中&#xff0c;深拷贝与浅拷贝是处理对象及其嵌套对象复制的两种主要方式。理解它们的差异对于有效管理内存和避免不必要的副作用至关重要。 浅拷贝 浅拷贝只复制对象的一层属性&#xff0c;如果对象的属性值是基本类型&#xff08;如字符串、数字&#xff09;&a…

Niginx介绍和安装使用

Nginx是什么&#xff1f; Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点&#xff08;俄文&#xff1a;Рамблер&#xff09;开发的&#xff0c;第一…

武汉灰京文化:中国手游行业新技术的涌现与产业链的完善

中国手游行业正迎来新技术的涌现&#xff0c;如虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;和人工智能&#xff08;AI&#xff09;。这些技术为游戏提供了全新的可能性&#xff0c;扩展了游戏的玩法和体验。例如&#xff0c;VR技术可以让玩家沉浸…

KafKa3.x基础

来源&#xff1a;B站 目录 定义消息队列传统消息队列的应用场景消息队列的两种模式 Kafka 基础架构Kafka 命令行操作主题命令行操作生产者命令行操作消费者命令行操作 Kafka 生产者生产者消息发送流程发送原理生产者重要参数列表 异步发送 API普通异步发送带回调函数的异步发送…

leetcode——hot1

两数之和 class Solution {public int[] twoSum(int[] nums, int target) {int[] arrs new int[2];for(int i 0; i < nums.length - 1; i){for(int j i 1; j < nums.length; j){if(nums[i] nums[j] target){arrs[0] i;arrs[1] j;break;}}}return arrs;} }
推荐文章