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

工具方法合集-utils.js

通用 import get from lodash.get import cloneDeep from lodash.clonedeep // 深度clone export function deepClone(obj) {return obj ? cloneDeep(obj) : obj } export function lodashGet(obj, key, defaultValue = ) {//这个 defaultValue 不能给默认 值 会报错;retur…...

安卓11-设置HDMI分辨率流程

安卓11中从设置-显示设置hdmi分辨率流程:framework层通过jni控制底层驱动实现&#xff0c;标准驱动模型 packages\apps\Settings\src\com\android\settings\display\HdmiSettings.javaprivate void updateResolution(final ITEM_CONTROL control, final int index) {showWaitin…...

Vue3+vite搭建基础架构(11)--- 菜单栏功能和Tab页功能实现

Vue3vite搭建基础架构&#xff08;11&#xff09;--- 菜单栏功能和Tab页功能实现 说明删除项目中不需要的文件userStore全局属性代码菜单栏代码Tab页代码解决浏览器输入地址时不会打开tab页问题和切换tab页时参数丢失问题 说明 这里记录下自己在Vue3vite的项目实现菜单栏功能和…...

餐饮神秘顾客公司:关于餐饮行业神秘顾客调查注意事项

在餐饮业&#xff0c;顾客体验往往决定品牌的成败。为深入了解顾客需求和感受&#xff0c;许多餐饮企业引入“神秘顾客”调查。然而&#xff0c;此调查并非简单走过场&#xff0c;其中细节和注意事项颇多。餐饮行业神秘顾客调查需注意以下几点&#xff1a; 1. 专业培训&#x…...

概率密度函数(PDF)与神经网络中的激活函数

原创:项道德(daode3056,daode1212) 在量子力学中&#xff0c;许多现象都是统计的结果&#xff0c;基本上用的是正态分布&#xff0c;然而&#xff0c;从本质上思考&#xff0c;应该还存在低阶的分布&#xff0c;标准的正态分布是它的极限&#xff0c;这样一来&#xff0c;或许在…...

.netcore 6.0/7.0项目迁移至.netcore 8.0 注意事项

1、SqlSugarCore 相关 1.1 主项目添加数据&#xff0c;否则会报数据库连接错误&#xff1a; <InvariantGlobalization>false</InvariantGlobalization> <PropertyGroup><TargetFramework>net8.0</TargetFramework><Nullable>enable</…...

算法打卡day2|数组篇|Leetcode 977.有序数组的平方、 209.长度最小的子数组、59.螺旋矩阵II

算法题 Leetcode 977.有序数组的平方 题目链接: 977.有序数组的平方 大佬视频讲解&#xff1a;977.有序数组的平方 个人思路 第一时间就只想到暴力解法&#xff0c;双重循环一个循环比较一个循环赋值&#xff1b;但这样可能会超时&#xff0c;所以还能用双指针&#xff0…...

Hive【内部表、外部表、临时表、分区表、分桶表】【总结】

目录 Hive的物种表结构特性 一、内部表 建表 使用场景 二、外部表 建表:关键词【EXTERNAL】 场景&#xff1a; 外部表与内部表可互相转换 三、临时表 建表 临时表横向对比​编辑 四、分区表 建表&#xff1a;关键字【PARTITIONED BY】 场景&#xff1a; 五、分桶表 …...

随手写的小程序2 一个nc能控制的程序

小程序源代码 下载: https://download.csdn.net/download/nn_84/88846445?spm1001.2014.3001.5501 请下载 Qt 5.12.12 server.pro : QT gui networkCONFIG c11 console CONFIG - app_bundle# You can make your code fail to compile if it uses deprecated APIs. # In o…...

Android中通过属性动画实现文字轮播效果

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 一、创建一个自定义ProvinceView类,具体代码如下 /*** Author: ly* Date: 2024/2/22* D…...