React实现复杂搜索表单的展开收起功能
更新时间：2021年09月26日 15:31:29 作者：小白Rachel
本节对于需要展开收起效果的查询表单进行概述，主要涉及前端样式知识。对React实现复杂搜索表单的展开-收起功能感兴趣的朋友一起看看吧
给时间时间，让过去过去。
上节我们写过了【搜索】表单，以及查询、重置功能。本节对于需要展开收起效果的查询表单 进行概述，主要涉及前端样式知识。
样式效果如下：
思路：在Search组件中定义两个组件renderAdvancedForm，renderSimpleForm,其中renderSimpleForm中只有五个查询选项，而在renderAdvancedForm包含所有的搜索选项。点击'展开‘'收起‘按钮调用onClick={toggleForm}切换form显示样式即可。
1. 写renderSimpleForm和renderAdvancedForm
使用Col和Row进行分行分块，并注意为展开按钮添加点击事件。
const renderSimpleForm = useMemo(() => {
const { getFieldDecorator } = form
const { query } = getLocation()
return (
<Form layout="inline">
<Row>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">...</FormItem>
</Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
onClick={toggleForm}
style={{ marginRight: '15px' }}
className={styles.a}
>
展开 <Icon type="down" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
查询
</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
重置
</Button>
</Col>
</Row>
</Form>
)
}, [form, handleFormReset, handleSearch, toggleForm])
同理，需要使用Rol和Row设置两行，并在对应位置空出收起按钮，为收起按钮添加点击函数
const renderAdvancedForm = useMemo(() => {
const { getFieldDecorator, getFieldValue } = form
const { query } = getLocation()
return (
<Form layout="inline">
<Row style={{ marginBottom: '20px' }}>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
onClick={toggleForm}
style={{ marginRight: '15px' }}
className={styles.a}
>
收起 <Icon type="up" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
查询
</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
重置
</Button>
</Col>
</Row>
<Row>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
<Col md={4} sm={24}><FormItem label="">...</FormItem></Col>
</Row>
</Form>
)
}, [form, handleFormReset, handleSearch, time1, time2, toggleForm])
2.添加toggleForm函数实现‘展开'‘收起'切换
const toggleForm = useCallback(() => {
setExpandForm(!expandForm)
}, [expandForm])
3.在search组件中按情况渲染表单效果
return (
<Card bordered={false}>
<div className={styles.search}>
{expandForm ? renderAdvancedForm : renderSimpleForm}
</div>
</Card>
)
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 layout="inline">
<Row>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderNumber', {
initialValue: query.name || ''
})(<Input placeholder="需求编号" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('experimentName', {
initialValue: query.name || ''
})(<Input placeholder="需求名称" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('userName', {
initialValue: query.name || ''
})(<Input placeholder="用户名" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('mobile', { initialValue: query.name || '' })(
<Input placeholder="手机号" />
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('status', {
initialValue:
query.type === undefined ? '' : query.type.toString()
})(
<Select>
<Option value={''} disabled>
{' '}
实验状态{' '}
</Option>
{testStatus.map((v: any) => (
<Option key={v.key} value={v.key}>
{v.value}
</Option>
))}
</Select>
)}
</FormItem>
</Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
onClick={toggleForm}
style={{ marginRight: '15px' }}
className={styles.a}
>
展开 <Icon type="down" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
查询
</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
重置
</Button>
</Col>
</Row>
</Form>
)
}, [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 layout="inline">
<Row style={{ marginBottom: '20px' }}>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderNumber', {
initialValue: query.name || ''
})(<Input placeholder="需求编号" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('experimentName', {
initialValue: query.name || ''
})(<Input placeholder="需求名称" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('userName', {
initialValue: query.name || ''
})(<Input placeholder="用户名" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('mobile', { initialValue: query.name || '' })(
<Input placeholder="手机号" />
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('status', {
initialValue:
query.type === undefined ? '' : query.type.toString()
})(
<Select>
<Option value={''}> 实验状态 </Option>
{testStatus.map((v: any) => (
<Option key={v.key} value={v.key}>
{v.value}
</Option>
))}
</Select>
)}
</FormItem>
</Col>
<Col md={4} sm={24} style={{ textAlign: 'right' }}>
<a
onClick={toggleForm}
style={{ marginRight: '15px' }}
className={styles.a}
>
收起 <Icon type="up" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
查询
</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
重置
</Button>
</Col>
</Row>
<Row>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('priceLow', {
initialValue: query.name || '',
rules: [{ validator: dataValidate }]
})(<Input placeholder="总价范围" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('priceHigh', {
initialValue: query.name || '',
rules: [{ validator: dataValidate }]
})(<Input placeholder="总价范围" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderTimeStart', {
initialValue: query.name || ''
})(
<DatePicker
onChange={change1}
disabledDate={disabledDate1}
placeholder="下单时间"
/>
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderTimeEnd', {
initialValue: query.name || ''
})(
<DatePicker
onChange={change2}
disabledDate={disabledDate2}
placeholder="下单时间"
/>
)}
</FormItem>
</Col>
</Row>
</Form>
)
}, [form, handleFormReset, handleSearch, time1, time2, toggleForm])
return (
<Card bordered={false}>
<div className={styles.search}>
{expandForm ? renderAdvancedForm : renderSimpleForm}
</div>
</Card>
)
})
到此这篇关于React实现复杂搜索表单的展开-收起功能的文章就介绍到这了,更多相关React表单展开收起内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了React实现阿里云OSS上传文件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2021-06-06
一文搞懂 React 18 中的 useTransition() 与 useDeferredValue()
这篇文章主要介绍了一文搞懂 React 18 中的 useTransition()与useDeferredValue()，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了react 事项懒加载的三种方法及使用场景，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
react函数组件useState异步,数据不能及时获取到的问题
这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
react中使用echarts,并实现tooltip循环轮播方式
这篇文章主要介绍了react中使用echarts,并实现tooltip循环轮播方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了React中如何设置多个className问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
详解在React.js中使用PureComponent的重要性和使用方式
这篇文章主要介绍了详解在React.js中使用PureComponent的重要性和使用方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
下面小编就为大家带来一篇浅谈react+es6+webpack的基础配置。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
随着业务的发展，每一个 React Native 应用的代码数量都在不断增加。作为一个前端想到的方案自然就是动态导入（Dynamic import）了，本文介绍了React Native中实现动态导入的示例代码，需要的可以参考一下2022-06-06
最新评论