TS & Antd Form

import React, { forwardRef } from 'react';
import { Form, Input, Select, Button, Row, Col } from 'antd';
import { FormComponentProps } from 'antd/lib/form/Form';
interface IFliterProps extends FormComponentProps {
  onSubmitSuccess: (values: any) => void;
}
function Fliter(props: IFliterProps) {
  const { form, onSubmitSuccess } = props;
  const { getFieldDecorator, resetFields, validateFields } = form;
  const onSubmit = () => {
    validateFields((errors, values) => {
      if (errors) {
        console.log('errors', errors);
      }
      console.log('values', values);
      onSubmitSuccess(values);
    });
  };
  const onReset = () => {
    resetFields();
  };
  return (
    <div className="strategy-fliter-wrapper">
      <Form layout="inline">
        <Row>
          <Col span={8}>
            <Form.Item label="策略名称" labelCol={{ span: 7 }}>
              {getFieldDecorator('strategyName')(
                <Input placeholder="请输入策略名称" />,
              )}
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div style={{ float: 'right' }}>
        <Button type="primary" onClick={onSubmit}>
          查询
        </Button>
        &nbsp;&nbsp;
        <Button onClick={onReset}>重置</Button>
      </div>
    </div>
  );
}
// IFliterProps 指定子组件的属性类型
const WrappedFliter = Form.create<IFliterProps>()(forwardRef(Fliter));
export default WrappedFliter;