前端项目实战38-查询都要单独形成一套组件-优秀呀

最新推荐文章于 2024-07-24 23:00:08 发布

前端歌谣

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量88

点赞数

文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/qq_41632427/article/details/126981317

版权

前端记录-work-react-最近工作专栏收录该内容

212 篇文章 3 订阅

订阅专栏

父组件

 <Card>
                <SearchForm
                    formList={formList}
                    actions={actions}
                    onSearch={onSearch}
                    onClick={onAddMenu}
                    showLabel={true}
                ></SearchForm>
            </Card>

子组件

import React, { memo } from 'react';
import { Button, Input, Form } from 'antd';
import { ButtonType } from 'antd/es/button/button';
import './index.less';

export interface SearchFormAction {
  name: string;
  type?: ButtonType;
}

export interface SearchFormItem {
  name: string;
  label: string;
  placeholder?: string;
  rules?: object[];
  render?: React.ReactElement;
}

interface SearchFormProps {
  formList: SearchFormItem[];
  onSearch: (values: any) => void;
  actions: SearchFormAction[];
  onClick: (index: number) => void;
  showLabel?: boolean;
}

function SearchForm(props: SearchFormProps) {
  const [form] = Form.useForm();

  const reset = () => {
    form.resetFields();
    props.onSearch({});
  };

  const onSearch = () => {
    form.validateFields().then(res => {
      props.onSearch(res);
    });
  };

  return (
    <Form className="layout__search" form={form} layout="inline" onFinish={onSearch}>
      {props.formList.map((item: SearchFormItem) => (
        <Form.Item
          label={props.showLabel !== false && item.label ? item.label : ''}
          key={item.name}
          name={item.name}
          rules={item.rules}
        >
          {item.render ? item.render : <Input placeholder={item.placeholder} />}
        </Form.Item>
      ))}

      <Form.Item>
        <Button htmlType="submit">查询</Button>
      </Form.Item>

      <Form.Item>
        <Button htmlType="reset" onClick={reset}>
          重置
        </Button>
      </Form.Item>
      {props.actions.map((action: SearchFormAction, index: number) => (
        <Form.Item key={action.name}>
          <Button type={action.type} onClick={() => props.onClick(index)}>
            {action.name}
          </Button>
        </Form.Item>
      ))}
    </Form>
  );
}

export default memo(SearchForm);