当前位置: 首页 > news >正文

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

文章目录

今天遇到了一个奇怪的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>

相关文章:

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

文章目录 今天遇到了一个奇怪的bug&#xff0c;Form表单中的Input组件的值&#xff0c;不能被Form获取&#xff0c;导致输入了内容&#xff0c;但是表单提交的时候值为undefined 报错代码 import { Button, Form, Input } from antd; import React from react;const App: Rea…...

Encoder-decoder 与Decoder-only 模型之间的使用区别

承接上文&#xff1a;Transformer Encoder-Decoer 结构回顾 笔者以huggingface T5 transformer 对encoder-decoder 模型进行了简单的回顾。 由于笔者最近使用decoder-only模型时发现&#xff0c;其使用细节和encoder-decoder有着非常大的区别&#xff1b;而huggingface的接口为…...

【STM32备忘录】【STM32WB系列的BLE低功耗蓝牙】一、测试广播配置搜不到信号的注意事项

一、预备知识&#xff1a; WB系列是双核单片机&#xff0c;用户写M4&#xff0c;无线协议栈使用M0新买到手的单片机&#xff0c;需要自己刷入使用的无线协议栈刷入无线协议栈的途径是通过一个叫FUS的东东&#xff0c;类似于bootloader&#xff0c;这个FUS新买的芯片通常已经刷…...

ChatGPT 是什么

文章目录 一、ChatGPT 是什么二、ChatGPT的发明者三、ChatGPT的运作方式四、ChatGPT的技术五、ChatGPT的优势六、ChatGPT的局限性七、ChatGPT的应用八、ChatGPT的未来九、总结 一、ChatGPT 是什么 OpenAI的ChatGPT&#xff0c;即Chat Generative Pre-Trained Transformer&…...

4款好用的ai智能写作软件,为写作排忧解难!

在当今信息爆炸的时代&#xff0c;写作已经成为人们生活和工作中不可或缺的一部分。然而&#xff0c;对于许多人来说&#xff0c;写作可能是一项具有挑战性的任务&#xff0c;需要花费大量的时间和精力。幸运的是&#xff0c;随着人工智能技术的不断发展&#xff0c;ai智能写作…...

js设计模式:计算属性模式

作用: 将对象中的某些值与其他值进行关联,根据其他值来计算该值的结果 vue中的计算属性就是很经典的例子 示例: let nowDate 2023const wjtInfo {brithDate:1995,get age(){return nowDate-this.brithDate}}console.log(wjtInfo.age,wjt年龄)nowDate 1console.log(wjtInf…...

2015-2024年考研数学(一)真题练习和解析——选择题

各个大学已经陆陆续续开学了&#xff0c;备考2025年考研的同学也要紧锣密鼓地开始备考&#xff0c;尤其是三门公共课——政治、英语、数学&#xff0c;备考的时间和周期都比较长&#xff0c;每一门都是难啃的硬骨头。 在这三门公共课中&#xff0c;数学的灵活性是最大的&#x…...

Git合并固定分支的某一部分至当前分支

在 Git 中&#xff0c;通常使用 git merge 命令来将一个分支的更改合并到另一个分支。如果你只想合并某个分支的一部分代码&#xff0c;可以使用以下两种方法&#xff1a; 1.批量文件合并 1.1.创建并切换到一个新的临时分支 首先&#xff0c;从要合并的源分支&#xff08;即要…...

Codeforces Round 928 (Div. 4) (A-E)

比赛地址 : https://codeforces.com/contest/1926 A 遍历每一个字符串&#xff0c;比较1和0的数量即可&#xff0c;那个大输出那个; #include<bits/stdc.h> #define IOS ios::sync_with_stdio(0);cin.tie(0);cout.tie(0); #define endl \n #define lowbit(x) (x&am…...

git远程操控gitee

配置SSH公钥 首先&#xff0c;在本地计算机上生成SSH公钥。打开终端或命令提示符窗口&#xff0c;并执行以下命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com"按照提示操作&#xff0c;生成SSH密钥对。默认情况下&#xff0c;公钥将保存在~…...

常见面试题:TCP的四次挥手和TCP的滑动窗口

说一说 TCP 的四次挥手。 挥手即终止 TCP 连接&#xff0c;所谓的四次挥手就是指断开一个 TCP 连接时。需要客户端和服务端总共发出四个包&#xff0c;已确认连接的断开在 socket 编程中&#xff0c;这一过程由客户端或服务端任意一方执行 close 来触发。这里我们假设由客户端…...

力扣随笔之两数之和 Ⅱ -输入有序数组(中等167)

思路&#xff1a;在递增数组中找出满足相加之和等于目标数 定义左右两个指针&#xff08;下标&#xff09;从数组两边开始遍历&#xff0c;若左右指针所指数字之和大于目标数&#xff0c;则将右指针自减&#xff0c;若左右指针所指数字之和小于目标数&#xff0c;则左指针自加&…...

最优传输(Optimal Transport)

最优传输&#xff08;Optimal Transport&#xff09;是一种数学理论和计算方法&#xff0c;用于描述两个概率分布之间的距离或者对应关系。它的核心概念是如何以最佳方式将一组资源&#xff08;如质量、能量等&#xff09;从一个位置传输到另一个位置。 基本概念&#xff1a; …...

MIT-6.824-Lab2,Raft部分笔记|Use Go

文章目录 前记Paper6&#xff1a;RaftLEC5、6&#xff1a;RaftLAB22AtaskHintlockingstructureguide设计与编码 2BtaskHint设计与编码 2CtaskHint question后记 LEC5&#xff1a;GO, Threads, and Raftgo threads技巧raft实验易错点debug技巧 前记 趁着研一考完期末有点点空余…...

使用openeuler 22.03替代CentOS 7.9,建立虚拟机详细步骤

进入浏览器搜索网址下载openeuler 22.03镜像文件 https://mirrors.huaweicloud.com/openeuler/openEuler-22.03-LTS-SP3/ISO/x86_64/openEuler-22.03-LTS-SP3-x86_64-dvd.iso 打开VMware Workstation新建一个虚拟机&#xff1a; 自定义虚拟机位置 加入下载好的openeuler镜像文件…...

代理技术引领出海征程

在数字娱乐的繁荣时代&#xff0c;游戏开发者和发行商们意识到&#xff0c;要在全球市场立足&#xff0c;必须迈向国际化的出海之路。然而&#xff0c;这一旅程面临着跨越网络壁垒、适应多元文化和提升全球连接性的巨大挑战。本文将深入探讨代理技术在游戏行业出海过程中的创新…...

谷粒商城篇章9 ---- P248-P261/P292-P294 ---- 消息队列【分布式高级篇六】

目录 1 消息队列(Message Queue)简介 1.1 概述 1.2 消息服务中两个重要概念 1.3 消息队列主要有两种形式的目的地 1.4 JMS和AMQP对比 1.5 应用场景 1.6 Spring支持 1.7 SpringBoot自动配置 1.7 市面上的MQ产品 2 RabbitMQ 2.1 RabbitMQ简介 2.1.1 RabbitMQ简介 2…...

【Spring连载】使用Spring Data访问 MongoDB(五)----生命周期事件

【Spring连载】使用Spring Data访问 MongoDB&#xff08;五&#xff09;----生命周期事件Lifecycle Events 一、实体回调Entity Callbacks1.1 实现实体回调1.2 注册实体回调 二、特定存储的实体回调 一、实体回调Entity Callbacks 1.1 实现实体回调 1.2 注册实体回调 二、特…...

JavaSec 之 SQL 注入简单了解

文章目录 JDBC 注入语句拼接(Statement)修复方案 语句拼接(PrepareStatement)修复方案 预编译 JdbcTemplate修复方案 MyBatisLike 注入Order By 注入In 注入 寒假学了一个月 pwn&#xff0c;真心感觉这玩意太底层学的我生理不适应了&#xff0c;接下来学一段时间 java 安全缓一…...

第十一章——期约与异步函数

ECMAScript 6及之后的几个版本逐步加大了对异步编程机制的支持&#xff0c;提供了令人眼前一亮的新特性。ECMAScript 6新增了正式的Promise&#xff08;期约&#xff09;引用类型&#xff0c;支持优雅地定义和组织异步逻辑。接下来几个版本增加了使用async和await关键字定义异步…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

【前端异常】JavaScript错误处理:分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...