//1.const [form] = useForm() 必不可少!!!
//2.必须要给组件传递一个props !!!
//3.给Form组件,添加form={form} !!!
//4.获取表单的值, form.getFieldValue 获取对应字段的值
//5.提交表单 onFinish
/*
<Form.Item name='myInput' > <Input placeholder='请输入' /> </Form.Item>
注:如果要获取到Input的值,必须用Form.Item 包裹 并且给Form.Item 添加name属性,后面获取Input值的时候,就是通过name来获取
*/
import React from 'react';
import { Form, Row, Col, Button, Input } from 'antd';
import styles from './index.less';
const Test1 = (props) => {
const [form] = Form.useForm() ******
const onFinish = (values) => { ******
console.log(values);
}
const otherBtnClick = () => {
console.log(form.getFieldValue('bbb'));
}
return (
<div className={styles.test1}>
<Form onFinish={onFinish} form={form}> ******
<Row>
<Col md={8} sm={24}>
<Form.Item label="联系电话" name='bbb'> ******
<Input placeholder='请输入' />
</Form.Item>
</Col>
<Col md={8} sm={24}>
<Form.Item label=" ">
<Button type='primary' htmlType='submit'>点我</Button>
</Form.Item>
</Col>
</Row>
</Form>
<Button type='primary' onClick={otherBtnClick}>点我获取form</Button>
</div>
);
};
export default Test1;
Antd 4.4.3 版本,如何获取form表单的值
最新推荐文章于 2023-11-21 21:39:47 发布