需求分析
首先 我们需要实现一个带有搜索功能的搜索框 本次只实现两种框的搜索功能 一种input 一种select
功能思维
第一步 初始版本
先写出一个input和一个render 还有两个按钮
<Form.Item 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>
开始升级版本（动态渲染搜索框）
接下来可以将搜索的数据改为动态渲染 因为按钮可以固定了 值从父级传入
{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> ))}
继续升级（方法通过子传父）
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 > ); }
继续升级（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 ( <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);
看看父组件的使用
<Card> <SearchForm formList={formList} actions={actions} onSearch={onSearch} onClick={onAddMenu} showLabel={true} ></SearchForm> </Card>
formList搜索表单值
const formList = useMemo<SearchFormItem[]>( () => [ { 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按钮值
const actions = useMemo<SearchFormAction[]>( () => [ { name: '新建', type: 'primary', }, ], [], );
onSearch子传父方法值
const onSearch = useCallback( (params: MenuSearchParams) => { initPageList(params); }, [page], );
onAddMenu 控制弹框开启的值
const onAddMenu = useCallback(() => { setCurrentMenu(null); setEditVisible(true); }, []);
结果
