react--（查询、重置）按钮封装

UI框架为ant design
第一步：创建components组件封装文件夹
1》components--ui文件夹下index.js的代码：
import FormSearch from './form'
export {FormSearch, CascaderMul}
2》components--ui--form文件夹下index.js的代码：
import {Form, Row, Col, Button, Space} from 'antd'
import {DownOutlined} from '@ant-design/icons'
import React, {useState, useEffect} from 'react'
import useMediaQuery from 'use-media-antd-query'

/**
 * 默认的查询表单配置
 */
const defaultColConfig = {
  xs: 3,
  sm: 3,
  md: 3,
  lg: 3,
  xl: 4,
  xxl: 6,
}

const getSpanConfig = (span, size) => {
  // if (typeof span === 'number') {
  //   return span
  // }
  const config = {
    ...defaultColConfig,
    ...span,
  }
  return config[size]
}
//收起、展开的代码可以根据你们需求来

const Collapse = ({collapse, onCollapse}) => {
  let text = '收起'

  if (!collapse) {
    text = '展开'
  }

  return (
    <a
      onClick={onCollapse}
      style={{display: 'flex', width: 100, alignItems: 'center'}}
    >
      {text}
      <DownOutlined
        style={{
          marginLeft: '0.5em',
          transition: '0.3s all',
          transform: `rotate(${collapse ? 0 : 0.5}turn)`,
        }}
      />
    </a>
  )
}

const getOffset = (length, span = 4) => {
  const cols = 24 / span
  return (span - 1 - (length % span)) * cols
}

/**
 * 查询表单
 * @param {Object} props 参数
 * @param {Object} props.initialValues 初始化值
 * @param {Function} props.onFinish 查询表单提交回调
 * @param {Function} props.onReset 重置表单
 * @param {Array} props.children 子组件
 * @param {Object} props.formRef 表单引用
 * @param {Boolean} props.collapsed 默认是否收起
 * @param {Number} props.span 列数
 * @returns
 */

function body({
  initialValues,
  onFinish,
  onReset = () => {},
  collapsed = false,
  span = 6,
  children,
  formRef,
}) {
  const [collapse, setCollapse] = useState(collapsed)
  const [form] = formRef ? [formRef] : Form.useForm()
  const windowSize = useMediaQuery()

  const [colSize, setColSize] = useState(span)
  const rowNumber = 24 / colSize || 3

  const onCollapse = () => {
    setCollapse(!collapse)
  }

  useEffect(() => {
    let defSpane = getSpanConfig(span, windowSize)
    setColSize(defSpane > span ? span : defSpane)
  }, [windowSize])

  const childrens = Array.isArray(children) ? children : [children]
  const item = childrens.filter((_, index) =>
    !collapse ? index < (colSize - 1 || 1) : true,
  )

  return (
    <div
      style={{
        background: '#ffffff',
        borderRadius: 4,
      }}
    >
      <Form
        form={form}
        onFinish={onFinish}
        layout="vertical"
        className="searchForm"
        initialValues={initialValues}
      >
        <Row gutter={16} justify="start">
          {item.map((child, index) => (
            <Col key={index} span={rowNumber}>
              {React.cloneElement(child)}
            </Col>
          ))}
          <Col
            span={rowNumber}
            offset={getOffset(item.length, colSize)}
            align="end"
            style={{
              textAlign: childrens.length + 1 > colSize ? 'left' : 'right',
            }}
          >
            <Form.Item label={' '}>
              <Space size="middle">
                <Space>
                  <Button
                    onClick={() => {
                      form.resetFields()
                      onReset()
                    }}
                  >
                    重置
                  </Button>
                  <Button type="primary" htmlType="submit">
                    查询
                  </Button>
                </Space>
                {childrens.length + 1 > colSize && (
                  <Collapse collapse={collapse} onCollapse={onCollapse} />
                )}
              </Space>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default body


3》页面引入：
import {FormSearch} from '~/components/ui'
<FormSearch>
 <Form.Item label="前缀类型" name="接口参数">
            <Input placeholder="提示信息" allowClear />
          </Form.Item>
</FormSearch>