antd 3.26.x + React 17实现一个最简单的表单

在工作中，我们经常会遇到需要写一个表单用来查询的情况，尤其是toB的项目，常常遇到一个表格页面，上方是面包屑，然后搜索栏，表格，分页；这时候，如果是新项目，那很好解决，直接ProTable一把梭，但是也有很多小伙伴会遇到一些老项目，碍于各种原因，无法升级antd的版本，这时候我们该怎么写一个表单呢？下面我以antd 3.x版本为例，分享一个最简单的表单案例。

话不多说，直接上干货：

import React from "react";
import { FormComponentProps } from "antd/lib/form";
import { Input, Form, Button } from "antd";

interface OwnProps {
  /** 组件外传入的回调，点查询时触发 */
  onSearch: (params: any) => void;
}
type AllProps = OwnProps & FormComponentProps;

const SearchForm = ({ form, onSearch }: AllProps) => {
  const { getFieldDecorator, resetFields, validateFields } = form;
  const onSubmit = () => {
    validateFields((err, values) => {
      if (!err) {
        /** 此处以列表分页查询为例子 */
        onSearch({
          name: values.name ? values.name.trim() : "",
          pageIndex: 1,
         });
      }
    });
  };
  const resetForm = () => {
    resetFields();
    onSubmit();
  };
  return (
    <Form layout="inline">
      <Form.Item label="名称">{getFieldDecorator("name")(<Input allowClear placeholder="请输入" />)}</Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit" style={{ marginRight: 10 }} onClick={onSubmit}>
          查询
        </Button>
        <Button type="default" onClick={resetForm}>
          重置
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Form.create<AllProps>()(SearchForm);

效果图：