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

一颗不甘坠落的流星2024-02-23 16:58

文章目录

今天遇到了一个奇怪的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.Item和Input之间不能有其他多余内容
比如：这样也是不行的，之间多了一层div结构什么的

html 复制代码

<Form.Item label="描述:" name="desc">
	<div>
 		<Input.TextArea  />
 	</div>
</Form.Item>