【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.Item和Input之间不能有其他多余内容 - 比如:这样也是不行的,之间多了一层
div结构什么的
<Form.Item label="描述:" name="desc"><div><Input.TextArea /></div>
</Form.Item>
相关文章:
【Antd】Form 表单获取不到 Input 的值
文章目录 今天遇到了一个奇怪的bug,Form表单中的Input组件的值,不能被Form获取,导致输入了内容,但是表单提交的时候值为undefined 报错代码 import { Button, Form, Input } from antd; import React from react;const App: Rea…...
Encoder-decoder 与Decoder-only 模型之间的使用区别
承接上文:Transformer Encoder-Decoer 结构回顾 笔者以huggingface T5 transformer 对encoder-decoder 模型进行了简单的回顾。 由于笔者最近使用decoder-only模型时发现,其使用细节和encoder-decoder有着非常大的区别;而huggingface的接口为…...
【STM32备忘录】【STM32WB系列的BLE低功耗蓝牙】一、测试广播配置搜不到信号的注意事项
一、预备知识: WB系列是双核单片机,用户写M4,无线协议栈使用M0新买到手的单片机,需要自己刷入使用的无线协议栈刷入无线协议栈的途径是通过一个叫FUS的东东,类似于bootloader,这个FUS新买的芯片通常已经刷…...
ChatGPT 是什么
文章目录 一、ChatGPT 是什么二、ChatGPT的发明者三、ChatGPT的运作方式四、ChatGPT的技术五、ChatGPT的优势六、ChatGPT的局限性七、ChatGPT的应用八、ChatGPT的未来九、总结 一、ChatGPT 是什么 OpenAI的ChatGPT,即Chat Generative Pre-Trained Transformer&…...
4款好用的ai智能写作软件,为写作排忧解难!
在当今信息爆炸的时代,写作已经成为人们生活和工作中不可或缺的一部分。然而,对于许多人来说,写作可能是一项具有挑战性的任务,需要花费大量的时间和精力。幸运的是,随着人工智能技术的不断发展,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年考研数学(一)真题练习和解析——选择题
各个大学已经陆陆续续开学了,备考2025年考研的同学也要紧锣密鼓地开始备考,尤其是三门公共课——政治、英语、数学,备考的时间和周期都比较长,每一门都是难啃的硬骨头。 在这三门公共课中,数学的灵活性是最大的&#x…...
Git合并固定分支的某一部分至当前分支
在 Git 中,通常使用 git merge 命令来将一个分支的更改合并到另一个分支。如果你只想合并某个分支的一部分代码,可以使用以下两种方法: 1.批量文件合并 1.1.创建并切换到一个新的临时分支 首先,从要合并的源分支(即要…...
Codeforces Round 928 (Div. 4) (A-E)
比赛地址 : https://codeforces.com/contest/1926 A 遍历每一个字符串,比较1和0的数量即可,那个大输出那个; #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公钥 首先,在本地计算机上生成SSH公钥。打开终端或命令提示符窗口,并执行以下命令: ssh-keygen -t rsa -b 4096 -C "your_emailexample.com"按照提示操作,生成SSH密钥对。默认情况下,公钥将保存在~…...
常见面试题:TCP的四次挥手和TCP的滑动窗口
说一说 TCP 的四次挥手。 挥手即终止 TCP 连接,所谓的四次挥手就是指断开一个 TCP 连接时。需要客户端和服务端总共发出四个包,已确认连接的断开在 socket 编程中,这一过程由客户端或服务端任意一方执行 close 来触发。这里我们假设由客户端…...
力扣随笔之两数之和 Ⅱ -输入有序数组(中等167)
思路:在递增数组中找出满足相加之和等于目标数 定义左右两个指针(下标)从数组两边开始遍历,若左右指针所指数字之和大于目标数,则将右指针自减,若左右指针所指数字之和小于目标数,则左指针自加&…...
最优传输(Optimal Transport)
最优传输(Optimal Transport)是一种数学理论和计算方法,用于描述两个概率分布之间的距离或者对应关系。它的核心概念是如何以最佳方式将一组资源(如质量、能量等)从一个位置传输到另一个位置。 基本概念: …...
MIT-6.824-Lab2,Raft部分笔记|Use Go
文章目录 前记Paper6:RaftLEC5、6:RaftLAB22AtaskHintlockingstructureguide设计与编码 2BtaskHint设计与编码 2CtaskHint question后记 LEC5: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新建一个虚拟机: 自定义虚拟机位置 加入下载好的openeuler镜像文件…...
代理技术引领出海征程
在数字娱乐的繁荣时代,游戏开发者和发行商们意识到,要在全球市场立足,必须迈向国际化的出海之路。然而,这一旅程面临着跨越网络壁垒、适应多元文化和提升全球连接性的巨大挑战。本文将深入探讨代理技术在游戏行业出海过程中的创新…...
谷粒商城篇章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(五)----生命周期事件Lifecycle Events 一、实体回调Entity Callbacks1.1 实现实体回调1.2 注册实体回调 二、特定存储的实体回调 一、实体回调Entity Callbacks 1.1 实现实体回调 1.2 注册实体回调 二、特…...
JavaSec 之 SQL 注入简单了解
文章目录 JDBC 注入语句拼接(Statement)修复方案 语句拼接(PrepareStatement)修复方案 预编译 JdbcTemplate修复方案 MyBatisLike 注入Order By 注入In 注入 寒假学了一个月 pwn,真心感觉这玩意太底层学的我生理不适应了,接下来学一段时间 java 安全缓一…...
第十一章——期约与异步函数
ECMAScript 6及之后的几个版本逐步加大了对异步编程机制的支持,提供了令人眼前一亮的新特性。ECMAScript 6新增了正式的Promise(期约)引用类型,支持优雅地定义和组织异步逻辑。接下来几个版本增加了使用async和await关键字定义异步…...
pyperclip测试策略:如何确保跨平台剪贴板功能的稳定性
pyperclip测试策略:如何确保跨平台剪贴板功能的稳定性 【免费下载链接】pyperclip Python module for cross-platform clipboard functions. 项目地址: https://gitcode.com/gh_mirrors/py/pyperclip pyperclip是一个强大的Python跨平台剪贴板模块࿰…...
Arm硬件跟踪技术在嵌入式调试中的应用与优化
1. Arm Development Studio 跟踪技术深度解析在嵌入式系统开发领域,调试实时性要求高的系统一直是个棘手问题。传统断点调试会中断程序执行流,而日志输出又可能影响系统时序。Arm Development Studio提供的硬件跟踪技术完美解决了这一痛点——它能以纳秒…...
微软:小模型替代大模型执行终端任务
📖标题:Terminus-4B: Can a Smaller Model Replace Frontier LLMs at Agentic Execution Tasks? 🌐来源:arXiv, 2605.03195v1 🛎️文章简介 🔸研究问题:在代码智能体的终端执行子任务中&#x…...
从双非到科软:我的22408备考复盘与实战指南
1. 双非逆袭科软:我的备考心路历程 作为一名双非院校的计算机专业学生,我深知考研这条路有多难走。去年这个时候,我也和屏幕前的你一样,在知乎、贴吧疯狂搜索各种经验贴,既期待又忐忑。现在回想起来,从3月到…...
程序员录音转行动项工具口碑推荐 | 经筛选的实用方案
针对2026年程序员群体的录音转行动项需求,实测多款主流工具后,筛选出实用方案,可有效解决需求对接、会议访谈后,录音整理、任务提取耗时久、准确率不佳的痛点。本次评测选取多款主流办公类录音转写工具,围绕程序员核心…...
【亲测免费】 CISP-DSG 数据安全培训教材课件标准版
CISP-DSG 数据安全培训教材课件标准版 【下载地址】CISP-DSG数据安全培训教材课件标准版 本仓库提供的是“注册数据安全治理专业人员”(Certified Information Security Professional - Data Security Governance,简称 CISP-DSG)的培训教材课…...
Docker Compose部署Nginx Proxy Manager保姆级教程:从端口映射到数据持久化全解析
Docker Compose部署Nginx Proxy Manager全流程精解:从架构设计到生产级实践 当你面对数十个需要反向代理的服务时,手动编辑Nginx配置文件的繁琐程度足以让人望而生畏。Nginx Proxy Manager的出现彻底改变了这种局面——这个基于Docker的开源解决方案将复…...
瑞芯微(EASY EAI)RV1126B TF卡电路
1. TF卡电路RV1126B核心板集成了1个SDMMC控制器和1个SDIO控制器,均可支持SDIO3.0协议,以及MMC V4.51协议。4线的数据总线宽度支持SDR104模式,速率达到200MHz。SDMMC控制器是由PMIC单独供电,可以动态的在1.8V和3.3V之间调节&#x…...
告别点点点!用Ranorex Studio录制你的第一个计算器自动化测试(附详细截图)
从零开始:用Ranorex Studio实现计算器自动化测试的完整指南 第一次接触自动化测试时,那种既期待又忐忑的心情我至今记忆犹新。作为一位长期被重复性手工测试困扰的QA工程师,每天面对相同的测试用例,点击相同的按钮,验证…...
AI 术语通俗词典:卷积
卷积是数学、信号处理、图像处理、深度学习、卷积神经网络和人工智能中非常重要的一个术语。它用来描述一种用一个小窗口在数据上滑动,并对局部区域进行加权汇总的运算。换句话说,卷积是在回答:如何从图像、语音或序列数据中提取局部模式。如…...
