README
基于 react hooks 和 antd 封装的搜索栏
B 端管理系统经常出现下面这样的布局
logo | 页头 |
---|---|
侧边 | 搜索栏(几个 input 框加一个搜索按钮) |
侧边 | 表格 |
侧边 | 页脚 |
由于很场景很常见,每次都实现相同的逻辑是不能接受的。 所以将搜索栏封装成组件
参数 | 功能 | 值 |
---|---|---|
request | 点击查询执行的函数 | function(queryConditions:{}) |
list | 查询条件列表 | [type, label, id] 种类,输入框前显示的值,字段 id |
type | 种类 | | | ------- |---| | input || | select | 多一个 option 属性 [{key,value}] |date|
截图
使用
import React, { useMemo } from "react";
import SearchContent, { useSearchContent } from "xxx";
// ...
function fetchData(params) {
return Promise.resolve({ success: true });
}
// fetchData函数,应直接返回一个Promise,返回的值将赋值给result。
// 你应该处理好关于请求的一切
const list = useMemo(
() => [
{ type: "input", label: "姓名", id: "name" },
{ type: "input", label: "年龄", id: "age" },
{ type: "input", label: "身高", id: "height" },
{
type: "select",
label: "select",
id: "sheight",
option: [
{ key: "1", value: 1 },
{ key: "2", value: 2 },
{ key: "3", value: 3 }
]
},
{ type: "date", label: "time", id: "time" }
],
[]
);
const [result, searchContentProps] = useSearchContent(fetchData, list);
// result --> { success: true }
//...
return (
// ...
<SearchContent {...searchContentProps} />
// ...
);