文章目录
今天遇到了一个奇怪的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>