formik和antd 的Form結合使用

官方文檔：https://formik.org/docs/api/withFormik

formik和antd 的Form結合使用

import { withFormik } from 'formik';
import {Form} from 'antd'

// 查詢表單初始化
    const SearchForm = withFormik({
      mapPropsToValues: (props: any) => {
        const { schema, data } = props;
        const _formData: any = {};
        if (schema) {
          // 設置初始值
          for (const key of Object.keys(schema)) {
            if (data[key]) {
              _formData[key] = data[key];
            }
          }
        }
        return _formData;
      },
      handleSubmit: this.handleSubmit,
    })(Form);



const schema = {
      name: {
        name: 'name',
        label: '名稱',
        component: 'input',
      },
 };


 // 初始化值
    const data = {
      name: 'test'
     
    };


<div className="query-content query-single">
            <SearchForm schema={schema} confirm="查詢" data={data} resetFormCustome={this.resetFormCustom} />
          </div>