【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 (
    <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>
  );
};
  • 不知道大家看上面的报错示例是否一眼就看出问题了,没看出来没关系,我来解释一下
<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>

相关推荐

  1. 【Antd】Form 获取 Input

    2024-02-23 12:48:02       29 阅读
  2. 【antd】 Pagination.onChange获取pageSize原因

    2024-02-23 12:48:02       40 阅读
  3. vue3+ts 获取input 输入框中

    2024-02-23 12:48:02       11 阅读
  4. 使用 @JsonIgnore注解后 获取参数问题

    2024-02-23 12:48:02       23 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-23 12:48:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-23 12:48:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-23 12:48:02       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-23 12:48:02       20 阅读

热门阅读

  1. Linux下各种压缩包的压缩与解压

    2024-02-23 12:48:02       27 阅读
  2. 【springBoot】统一功能处理

    2024-02-23 12:48:02       24 阅读
  3. TensorFlow基础

    2024-02-23 12:48:02       28 阅读
  4. Putty中运行matlab文件

    2024-02-23 12:48:02       33 阅读
  5. 如何成为软件测试工程师——理论知识篇

    2024-02-23 12:48:02       34 阅读
  6. 低代码开发应对AI时代到来的挑战与机遇

    2024-02-23 12:48:02       36 阅读
  7. vue中组件之间的通信方式有多少种

    2024-02-23 12:48:02       34 阅读
  8. R语言数据分析(四)

    2024-02-23 12:48:02       32 阅读
  9. MAST20005 R Statistics

    2024-02-23 12:48:02       24 阅读
  10. 【软考】传输层协议之UDP

    2024-02-23 12:48:02       27 阅读