React实现复杂搜索表单的展开收起功能 React实现复杂搜索表单的展开收

给时间时间，让过去过去。
上节我们写过了【搜索】表单，以及查询、重置功能。本节对于需要展开收起效果的查询表单进行概述，主要涉及前端样式知识。
样式效果如下：

文章图片

文章图片

思路：在Search组件中定义两个组件renderAdvancedForm，renderSimpleForm,其中renderSimpleForm中只有五个查询选项，而在renderAdvancedForm包含所有的搜索选项。点击'展开‘'收起‘按钮调用onClick={toggleForm}切换form显示样式即可。
1. 写renderSimpleForm和renderAdvancedForm 使用Col和Row进行分行分块，并注意为展开按钮添加点击事件。

const renderSimpleForm = useMemo(() => {const { getFieldDecorator } = formconst { query } = getLocation()return (
...............展开
)}, [form, handleFormReset, handleSearch, toggleForm])

同理，需要使用Rol和Row设置两行，并在对应位置空出收起按钮，为收起按钮添加点击函数

const renderAdvancedForm = useMemo(() => {const { getFieldDecorator, getFieldValue } = formconst { query } = getLocation()return (
...............收起 ............
)}, [form, handleFormReset, handleSearch, time1, time2, toggleForm])

2.添加toggleForm函数实现‘展开'‘收起'切换

const toggleForm = useCallback(() => {setExpandForm(!expandForm)}, [expandForm])

3.在search组件中按情况渲染表单效果

return ({expandForm ? renderAdvancedForm : renderSimpleForm})

4.附全部search组件代码

const Search: any = Form.create()(function({ form, init }: any) {const { validateFields } = formconst [expandForm, setExpandForm] = useState(false)const [time11, settime11] = useState('')const [time21, settime21] = useState('')const [time1, settime1] = useState(moment().format('YYYY-MM-DD'))const [time2, settime2] = useState(moment().format('YYYY-MM-DD'))const handleSearch = useCallback(() => {validateFields((err: any, data: any) => {pushPath({query: {...data,pageNum: 1,orderTimeStart: time11,orderTimeEnd: time21,orderNumber: data.orderNumber.replace(/\s+/g, ''),experimentName: data.experimentName.replace(/\s+/g, ''),userName: data.userName.replace(/\s+/g, ''),mobile: data.mobile.replace(/\s+/g, ''),priceLow: data.priceLow.replace(/\s+/g, ''),priceHigh: data.priceHigh.replace(/\s+/g, '')}})init()})}, [init, time11, time21, validateFields])const handleFormReset = useCallback(() => {clearPath()pushPath({query: { pageSize: 10, pageNum: 1 }})init()form.resetFields()}, [form, init])const toggleForm = useCallback(() => {setExpandForm(!expandForm)}, [expandForm])const renderSimpleForm = useMemo(() => {const { getFieldDecorator } = formconst { query } = getLocation()return (
{getFieldDecorator('orderNumber', {initialValue: query.name || ''})()}{getFieldDecorator('experimentName', {initialValue: query.name || ''})()}{getFieldDecorator('userName', {initialValue: query.name || ''})()}{getFieldDecorator('mobile', { initialValue: query.name || '' })()}{getFieldDecorator('status', {initialValue:query.type === undefined ? '' : query.type.toString()})({testStatus.map((v: any) => ())})} 展开
)}, [form, handleFormReset, handleSearch, toggleForm])const renderAdvancedForm = useMemo(() => {const { getFieldDecorator, getFieldValue } = formconst { query } = getLocation() function disabledDate1(current: any) {return current && current > time2}function disabledDate2(current: any) {return current && current < time1}function change1(date: any, dateString: any) {settime1(date)settime11(dateString)}function change2(date: any, dateString: any) {settime2(date)settime21(dateString)}const dataValidate = (rule: any, value: any, callback: any) => {if (value && parseInt(value) > parseInt(getFieldValue('priceHigh'))) {callback('不能高于最高值')} else if (value &&parseInt(value) < parseInt(getFieldValue('priceLow'))) {callback('不能低于最低值')} else {callback()}}return (
{getFieldDecorator('orderNumber', {initialValue: query.name || ''})()}{getFieldDecorator('experimentName', {initialValue: query.name || ''})()}{getFieldDecorator('userName', {initialValue: query.name || ''})()}{getFieldDecorator('mobile', { initialValue: query.name || '' })()}{getFieldDecorator('status', {initialValue:query.type === undefined ? '' : query.type.toString()})({testStatus.map((v: any) => ())})} 收起 {getFieldDecorator('priceLow', {initialValue: query.name || '',rules: [{ validator: dataValidate }]})()}{getFieldDecorator('priceHigh', {initialValue: query.name || '',rules: [{ validator: dataValidate }]})()}{getFieldDecorator('orderTimeStart', {initialValue: query.name || ''})()}{getFieldDecorator('orderTimeEnd', {initialValue: query.name || ''})()}
)}, [form, handleFormReset, handleSearch, time1, time2, toggleForm]) return ({expandForm ? renderAdvancedForm : renderSimpleForm})})