react.js javascript 前端 前端框架 组件库 React+hook+ts+ant design封装一个input和select搜索的组件

前言

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

需求分析

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

功能思维

第一步 初始版本

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

label="测试数据"

key="1"

name="测试数据"

rules={xxx}

style={xxx}

>

{true ? : }

查询

重置

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

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

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

label={props.showLabel !== false && item.label ? item.label : ''}

key={item.name}

name={item.name}

rules={item.rules}

style={{ width: `${item.width}px` }}

>

{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 (

);

}

继续升级（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 (

);

}

export default memo(SearchForm);

看看父组件的使用

formList={formList}

actions={actions}

onSearch={onSearch}

onClick={onAddMenu}

showLabel={true}

>

formList搜索表单值

const formList = useMemo(

() => [

{

width: 280,

name: 'factoryId',

placeholder: '请选择所属工厂',

label: '所属工厂',

render: (

style={{ width: '100%' }}

placeholder="请选择所属工厂"

optionFilterProp="children"

>

{factoryDataList && factoryDataList.map((item: any) => (

{item.name}

))}

)

},

],

[],

);

actions按钮值

const actions = useMemo(

() => [

{

name: '新建',

type: 'primary',

},

],

[],

);

onSearch子传父方法值

const onSearch = useCallback(

(params: MenuSearchParams) => {

initPageList(params);

},

[page],

);

onAddMenu 控制弹框开启的值

const onAddMenu = useCallback(() => {

setCurrentMenu(null);

setEditVisible(true);

}, []);

结果

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

文章来源

 您阅读本篇文章共花了：