| 给时间时间，让过去过去。 上节我们写过了【搜索】表单，以及查询、重置功能。本节对于需要展开收起效果的查询表单 进行概述，主要涉及前端样式知识。 样式效果如下： 
思路：在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表单展开收起内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
React之Hooks详解
基于Vue3的全屏拖拽上传组件 |
