当前位置: 首页 > 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关键字定义异步…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...