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

文章目录

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

  • 报错代码
ts 复制代码
import { Button,  Form, Input } from 'antd';
import React from 'react';

const App: React.FC = () => {
  const onFinish = ({desc) => {
    console.log('desc:', desc);	// undefined
  };

  return (
    <Form
      name="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>
  );
};
  • 不知道大家看上面的报错示例是否一眼就看出问题了,没看出来没关系,我来解释一下
html 复制代码
<Form.Item label="描述:" name="desc">
 	<Input.TextArea  />,
</Form.Item>
  • 是的,没错,就是<Input.TextArea />右边多了个符号(,)导致的
  • 因为Form.ItemInput之间不能有其他多余内容
  • 比如:这样也是不行的,之间多了一层div结构什么的
html 复制代码
<Form.Item label="描述:" name="desc">
	<div>
 		<Input.TextArea  />
 	</div>
</Form.Item>
相关推荐
BillKu6 分钟前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
bestadc9 分钟前
LeetCode 几道 Promises 和 Time 的题目
javascript·算法·leetcode
yangzhi_emo19 分钟前
ES6笔记4
前端·笔记·es6
萌萌哒草头将军25 分钟前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛27 分钟前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
用户4582031531728 分钟前
CSS无需JavaScript的交互效果实现
前端·css
影i30 分钟前
在 Vue + Codemirror 中优雅回显 JSON
前端
奇怪的前端731 分钟前
Alien-Signals 响应式系统
前端·vue.js
你单排吧36 分钟前
Electron打包图标修改失败问题
前端
@AfeiyuO38 分钟前
vue3 实现将页面生成 pdf 导出(html2Canvas + jspdf)
前端·pdf·vue