React+hook+ts+ant design封装一个input和select搜索的组件

Posted on by hackdl

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣

需求分析

首先 我们需要实现一个带有搜索功能的搜索框 本次只实现两种框的搜索功能 一种input 一种select

功能思维

第一步 初始版本

先写出一个input和一个render 还有两个按钮


                {true ?  : }

开始升级版本（动态渲染搜索框）

接下来可以将搜索的数据改为动态渲染 因为按钮可以固定了 值从父级传入

{props.formList.map((item: SearchFormItem) => (
                
                    {item.render ? item.render : }
                
            ))}

继续升级（方法通过子传父）

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

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

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

    return (
        

            {props.formList.map((item: SearchFormItem) => (
                


                    {item.render ? item.render : }
                
            ))}
            
                
            

            
                
            
            {
                props.actions.map((action: SearchFormAction, index: number) => (
                    
                        
                    
                ))
            }
        
    );
}

继续升级（ts限定数据类型）

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;
    width?: any
}

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

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

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

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

    return (
        

            {props.formList.map((item: SearchFormItem) => (
                


                    {item.render ? item.render : }
                
            ))}
            
                
            

            
                
            
            {
                props.actions.map((action: SearchFormAction, index: number) => (
                    
                        
                    
                ))
            }
        
    );
}

export default memo(SearchForm);

看看父组件的使用

formList搜索表单值

const formList = useMemo(
        () => [
            {
                width: 280,
                name: 'factoryId',
                placeholder: '请选择所属工厂',
                label: '所属工厂',
                render: (
                    
                )
            },
        ],
        [],
    );

actions按钮值

const actions = useMemo(
        () => [
            {
                name: '新建',
                type: 'primary',
            },
        ],
        [],
    );

onSearch子传父方法值

const onSearch = useCallback(
        (params: MenuSearchParams) => {
            initPageList(params);
        },
        [page],
    );

onAddMenu 控制弹框开启的值

const onAddMenu = useCallback(() => {
        setCurrentMenu(null);
        setEditVisible(true);
    }, []);

结果

我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.e1idc.net

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: