React+hook+ts+ant design封装一个input和select搜索的组件
source link: https://blog.51cto.com/u_14476028/5722996
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React+hook+ts+ant design封装一个input和select搜索的组件
精选 原创我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷 微信公众号前端小歌谣
首先 我们需要实现一个带有搜索功能的搜索框 本次只实现两种框的搜索功能 一种input 一种select
第一步 初始版本
先写出一个input和一个render 还有两个按钮
label="测试数据"
key="1"
name="测试数据"
rules={xxx}
style={xxx}
>
{true ? <Select/> : <Input />}
</Form.Item>
<Form.Item>
<Button htmlType="submit">查询</Button>
</Form.Item>
<Form.Item>
<Button htmlType="reset" onClick={reset}>
重置
</Button>
</Form.Item>
开始升级版本（动态渲染搜索框）
接下来可以将搜索的数据改为动态渲染 因为按钮可以固定了 值从父级传入
<Form.Item
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 : <Input placeholder={item.placeholder} />}
</Form.Item>
))}
继续升级（方法通过子传父）
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}
style={{ width: `${item.width}px` }}
>
{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 >
);
}
继续升级（ts限定数据类型）
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 (
<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}
style={{ width: `${item.width}px` }}
>
{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);
看看父组件的使用
<SearchForm
formList={formList}
actions={actions}
onSearch={onSearch}
onClick={onAddMenu}
showLabel={true}
></SearchForm>
</Card>
formList搜索表单值
() => [
{
width: 280,
name: 'factoryId',
placeholder: '请选择所属工厂',
label: '所属工厂',
render: (
<Select
style={{ width: '100%' }}
placeholder="请选择所属工厂"
optionFilterProp="children"
>
{factoryDataList && factoryDataList.map((item: any) => (
<Option value={item.id}>{item.name}</Option>
))}
</Select>
)
},
],
[],
);
actions按钮值
() => [
{
name: '新建',
type: 'primary',
},
],
[],
);
onSearch子传父方法值
(params: MenuSearchParams) => {
initPageList(params);
},
[page],
);
onAddMenu 控制弹框开启的值
setCurrentMenu(null);
setEditVisible(true);
}, []);
我是歌谣 放弃很容易 坚持一定很酷 关注前端小歌谣带你进入前端巅峰交流群
- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
-
59
-
9
react 通用列表组件封装 rxliuli blog _ 2020年...
-
9
简单说一下技术背景， 主要是 Ant Design 的版本是 3.x 的版本，React 是什么版本不紧要。 用法示例： getCardFields = (card) => { const fields = [ { id: `topic-${card.id}`,...
-
9
react 通用列表组件封装 re_ 2020年12月30日 下午 1.9k 字 ...
-
4
V2EX › 程序员 golang elasticsearch 搜索封装 xxjwxc ·
-
7
从零搭建react+ts组件库（封装antd） 为什么会有这样...
-
7
最好用的 6 个 React Tree select 树形组件测评与推荐B 端数据开发，卡拉云联合创始人最近更新 2022年06月05日
-
6
优雅地在 Vue、React 中使用 Web Components 封装的 UI 组件库更新日期: 2022-07-09阅读: 14标签:
-
5
React+hook+ts+ant design封装一个table的组件 精选 原创 前端歌谣 2022-09-29 15...
-
3
驱动开发：内核特征码搜索函数封装 精选 原创 lyshark 2022-10-17 12:37:35...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK