Antd4之一个form表单如何实现两个提交按钮

一、基本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],
 );