一、基本form表单
可以参考antd4的api,可以看到,form表单现在使用的是form 的onFini事件函数。如下所示
const handleSubmit = useCallback(
values => {
console.log(values) //这里就可以拿到name1,name2,name3的数据
},
[],
);
<Form
{...formItemLayout}
onFinish={handleSubmit}
>
<Row gutter={20}>
<Col span={6}>
<Input label="xxx" name={name1}/>
</Col>
<Col span={6}>
<Input label="xxx" name={name2}/>
</Col>
<Col span={6}>
<Input label="xxx" name={name3}/>
</Col>
</Row>
<Row>
<Col span={24} style={{ textAlign: 'right' }}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button
style={{ marginLeft: '8px' }}
onClick={() => {
form.resetFields();
}}
>
重置
</Button>
</Col>
</Row>
</Form>
二、实现两个提交按钮
现在的业务场景是需要多一个提交按钮,去实现不同的业务场景,但是提交时拿到的数据要和form的onFinish拿到的一样
html 如下;
<Row>
<Col span={24} style={{ textAlign: 'right' }}>
<Button type="primary" htmlType="submit">
查询
</Button>
<Button
style={{ marginLeft: '8px' }}
onClick={() => {
form.resetFields();
}}
>
重置
</Button>
// 比如下面的这个导出功能也需要拿到上面的name1,name2,name3
<Button onClick={handleExport} style={{ marginLeft: '8px' }}>
导出
</Button>
</Col>
</Row>
1. useForm
生命useForm并绑定在form表单里
import { Col, Form, Row, } from 'antd';
const [form] = Form.useForm();
<Form form={form}>
...xxxx
</Form>
2. validateFields–触发表单验证
const handleExport = useCallback(
e => {
e.preventDefault();
form
.validateFields()
.then(values => {
console.log(values) //这里就可以拿到所有数据,去完成其他的逻辑操作
debugger
})
.catch(err => message.error(err || '获取列表错误!'));
},
[form],
);
3. antd3之前的写法
在早期的antd中,写法和这个不一样,没有像现在一样使用链式表达式,如下所示:
//const handleSubmit: React.FormEventHandler<HTMLFormElement> =
const handleSubmit =useCallback(
(e): void => {
e.preventDefault();
form.validateFields((err, values) => {
if (!err) {
console.log(values)
debugger
}
});
},
[form],
);