给时间时间，让过去过去。
上节我们写过了【搜索】表单，以及查询、重置功能。本节对于需要展开收起效果的查询表单 进行概述，主要涉及前端样式知识。
样式效果如下：
思路：在Search组件中定义两个组件renderAdvancedForm，renderSimpleForm,其中renderSimpleForm中只有五个查询选项，而在renderAdvancedForm包含所有的搜索选项。点击'展开‘'收起‘按钮调用onClick={toggleForm}切换form显示样式即可。
1. 写renderSimpleForm和renderAdvancedForm
使用Col和Row进行分行分块，并注意为展开按钮添加点击事件。
const renderSimpleForm = useMemo(() => {
const { getFieldDecorator } = form
const { query } = getLocation()
return (
)
}, [form, handleFormReset, handleSearch, toggleForm])
同理，需要使用Rol和Row设置两行，并在对应位置空出收起按钮，为收起按钮添加点击函数
const renderAdvancedForm = useMemo(() => {
const { getFieldDecorator, getFieldValue } = form
const { 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 } = form
const [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 } = form
const { query } = getLocation()
return (
)
}, [form, handleFormReset, handleSearch, toggleForm])
const renderAdvancedForm = useMemo(() => {
const { getFieldDecorator, getFieldValue } = form
const { 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 (
)
}, [form, handleFormReset, handleSearch, time1, time2, toggleForm])
return (
{expandForm ? renderAdvancedForm : renderSimpleForm}
到此这篇关于React实现复杂搜索表单的展开-收起功能的文章就介绍到这了,更多相关React表单展开收起内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！