antd二次封装函数式组件（Searchgroup）
2020-02-02 本文已影响0人
你的时间非常值钱
本人长年累月做中台项目，接触的需求都是根据各种姿势查询数据，考虑到高频繁的使用，二话不说，必须封装来方便复用。其实之前已经用类组件写过一个并投入使用过几个项目，但感觉写得并不清爽， 于是趁着空余时间重新封装(设计)一下Searchgroup(搜索框组)组件，属于复合组件
本文涉及的技术栈主要有antd，react(最好16.8+)
截图antd官网
抛开样式问题，我们大概要做到效果如上图，根据条件查询并可清空条件，列出一些需求点
- 搜索条件配置简单，包括Input，Select，DatePicker等，甚至可配置自定义类型的组件
- 点击查询可搜集到所有条件的值
- 点击清空可清空并可自定义callback（如可重置条件后自动搜索一次）
- 支持条件默认值配置
- 支持校验
- 条件框排版可配置
- 改变某个条件，能触发事件（如改变语言条件，其它条件清空或做其它动作）
// usage
<Searchgroup
config={[
{ name: 'name', label: 'name', type: 'input'},
{ name: 'sex', label: 'sex', type: 'select', options: {
'男': 1,
'女': 2,
}},
{ name: 'age', label: 'age', type: 'inputNumber'},
{ name: 'address', label: 'address'},
{ name: 'hobby', label: 'hobby'},
{ name: 'birthday', label: 'birthday',type: 'datePicker'},
{ name: 'job', label: 'job', rules: [{ required: true, message: 'Please input your job!'},
{ name: 'lang', label: 'lang', type: 'select', options: {
'Chinese': '1',
'English': '2',
}}
]}
col={3}
onSearch={handleSearch}
onClear={handleClear}
/>
配置属性在文章底部
// Searchgroup.js
import React, { forwardRef } from 'react'
import { Button, Input, Select, InputNumber, DatePicker, Form } from 'antd'
import PropTypes from 'prop-types'
const { Option } = Select
const FormItem = Form.Item
// 默认条件布局
const defaultFormItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
}
// Form.create()包裹，目的使用内置的方法收集、清空、校验
const Index = Form.create()(props => {
const { config, col = 3, form, onSearch, onClear, resetSearch = true，formItemLayout = defaultFormItemLayout } = props
const { getFieldDecorator, validateFieldsAndScroll, resetFields } = form
const handleSearch = () => {
validateFieldsAndScroll((err, values) => {
onSearch && onSearch(values)
})
}
const handleClear = () => {
resetFields()
if(onClear) {
onClear()
resetSearch && handleSearch()
}
}
return (
<>
<div className="jantd-searchgroup">
{
config.map((p,i) => {
const { name, label, initialValue, rules, ...restProps} = p
return (
<FormItem label={name} key={i} className="jantd-searchgroup-col" style={{width: 100/col + '%'}} {...formItemLayout}>
{
getFieldDecorator(label, {
initialValue,
rules,
})(<C {...restProps} />)
}
</FormItem>
)
})
}
<FormItem label=' ' className="jantd-searchgroup-col jantd-searchgroup-btns" style={{width: 100/col + '%'}} {...formItemLayout}>
<Button type="primary" onClick={handleSearch}>search</Button>
<Button onClick={handleClear}>clear</Button>
</FormItem>
</div>
</>
)
})
// 不同类型组件，因为被FormItem包裹，需要支持ref，react16.3之前只能用class，16.8及以后函数组件可以用forwardRef包裹
const C = forwardRef((props, ref) => {
const baseProps = {
...props,
}
const { type, options } = props
const createC = type => {
switch(type) {
case 'select':
return (
<Select {...baseProps}>
{
Object.keys(options).map(p => <Option key={options[p]}>{p}</Option>)
}
</Select>
)
case 'inputNumber':
return <InputNumber {...baseProps} />
case 'datePicker':
return <DatePicker {...baseProps} />
default:
return <Input {...baseProps} />
}
}
return (
<span ref={ref}>
{createC(type)}
</span>
)
})
Index.propTypes = {
config: PropTypes.array.isRequired,
col: PropTypes.number,
onSearch: PropTypes.func,
onClear: PropTypes.func,
resetSearch: PropTypes.bool,
formItemLayout: PropTypes.object,
}
export default Index
组件的主要设计逻辑，搜集和清空条件逻辑是利用了antd的form表单的方法，当然逐个条件组件onChange上交收集值也是没问题的（我上个版本就是这样做），但考虑到校验功能在Form有现成的配置逻辑，在这里就重写了，排版方面用百分比浮动的方法
目前效果.png
上面一口气先完成了主要功能，会发现配置了默认值的条件，点击清空后并不是设为空置，而是重设为默认值，这点需要改造，不使用resetFields，而去遍历配置逐个set为undefined
const handleClear = () => {
// 删除这个方法
// resetFields()
config.forEach(c => setFieldsValue({[c.label]: undefined }))
if(onClear) {
onClear()
resetSearch && handleSearch()
}
}
然后需要改变语言lang后自动改变sex选项到options，需这样配置使用
// usage
// ...
const [ sex, setSex ] = useState('1')
const sexOptions = {
'1': {
'男': 1,
'女': 2,
},
'2': {
'male': 1,
'female': 2,
}
}
// ...
<Searchgroup
config={[
{ name: 'sex', label: 'sex', type: 'select', options: sexOptions[sex]},
{ name: 'lang', label: 'lang', type: 'select', options: {
'Chinese': '1',
'English': '2',
}, onChange: v => setSex(v)}
]}
/>
接着实现自定义组件作搜索条件，注意的是自定义组件需符合FormItem输入输出的约定
antd官网.png
// 自定义组件
const MyInputs = props => {
const { value = {}, onChange } = props
return (
<div style={{display: 'flex'}}>
<Input value={value.n} onChange={e => onChange({
...value,
n: e.target.value
})} />
<Select value={value.b} onChange={v => onChange({
...value,
b: v,
})}>
<Option key='a'>A</Option>
<Option key='b'>B</Option>
</Select>
</div>
)
}
// usage
// ...
<Searchgroup
config={[
{ name: 'inputs', label: 'inputs', render: MyInputs}
]}
/>
// Searchgroup
// ...
// 不同类型组件
const C = forwardRef((props, ref) => {
const baseProps = {
...props,
}
const { type, render, options } = props
if(render) {
const C = render
return <C {...baseProps} />
}
// ...
一开始上面的组件类型type只有Input、Select、DatePicker、InputNumber配置，假如条件类型丰富一点就不够用了，而现在加上了自定义组件的配置方法，只要符合规范的自定义组件写法约定，Upload、Checkbox或者更加复杂的交互组件也可以先从自定义属性配置用起，往后会根据情况新增组件类型的直接配置
然后贴上样式代码
/* 这次用cra脚手架写的，懒得配置less，下面的样式实际要加上命名空间 */
.ant-select, .ant-input-number, .ant-calendar-picker {
width: 100% !important;
}
.jantd-searchgroup {
width: 100%;
}
.jantd-searchgroup-col {
float: left;
display: flex !important;
align-items: center;
}
.jantd-searchgroup-btns label {
opacity: 0;
}
.jantd-searchgroup-btns button {
margin: 0 8px;
}
优化
如无意外，每次onChange其中一个条件都会引起所有条件组件的re-render，因为react设计哲学是不会干涉重复的业务渲染，这需要手动优化，我选择用React.memo，这个api对标类组件的PureComponent，都是自动的shallowEqual。
第一个参数是组件，第二个参数是优化函数，判断是否需要re-render，返回true即不re-render
// Searchgroup.js
// ...
const areEqual = (prevProps, nextProps) => {
// 值相等就不需要重新渲染
if(prevProps.value === nextProps.value) {
return true
}
return false
}
// 不同类型组件
const C = memo(forwardRef((props, ref) => {
// ...
}), areEqual)
加上memo之后发现没多余的re-render，优化成功，基本功能和优化就完成了，有空再完善
配置
config: 各条件的配置(name: 显示的名字，label: 提交的key，type:条件的组件类型，initialValue:默认值，rules:校验规则 ，render:自定义组件（符合FormItem自定义组件规范约定）...)
col:每行的个数，默认3
onSearch:点击搜索触发的回调
onClear:点击清空触发的回调
resetSearch: 点击清空重新搜索，默认true
formItemLayout: 条件的布局，应用于FormItem
更新
2020-02-05
暂定为体验版，使用了umi/father打包(支持umd、cjs、es三种格式)，已将Searchgroup加入组件库，安装方法：
npm/cnpm i j-antd -S
yarn add j-antd -S
使用方法
import { Searchgroup } from 'j-antd'
