【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.Item和Input之间不能有其他多余内容 - 比如：这样也是不行的，之间多了一层
div结构什么的
<Form.Item label="描述:" name="desc"><div><Input.TextArea /></div>
</Form.Item>