【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);	
  };

  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>

• 是的，没错，就是 右边多了个符号（,）导致的
• 因为 Form.Item 和Input之间不能有其他多余内容
• 比如：这样也是不行的，之间多了一层 div 结构什么的

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