React實現復雜搜索表單的展開收起功能
更新時間：2021年09月26日 15:31:29 作者：小白Rachel
本節(jié)對于需要展開收起效果的查詢表單進行概述，主要涉及前端樣式知識。對React實現復雜搜索表單的展開-收起功能感興趣的朋友一起看看吧
給時間時間，讓過去過去。
上節(jié)我們寫過了【搜索】表單，以及查詢、重置功能。本節(jié)對于需要展開收起效果的查詢表單 進行概述，主要涉及前端樣式知識。
樣式效果如下：
思路：在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>
{' '}
實驗狀態(tài){' '}
</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={''}> 實驗狀態(tài) </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表單展開收起內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了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循環(huán)輪播方式
這篇文章主要介紹了react中使用echarts,并實現tooltip循環(huán)輪播方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了React中如何設置多個className問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解在React.js中使用PureComponent的重要性和使用方式
這篇文章主要介紹了詳解在React.js中使用PureComponent的重要性和使用方式，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
下面小編就為大家?guī)硪黄獪\談react+es6+webpack的基礎配置。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
隨著業(yè)務的發(fā)展，每一個 React Native 應用的代碼數量都在不斷增加。作為一個前端想到的方案自然就是動態(tài)導入（Dynamic import）了，本文介紹了React Native中實現動態(tài)導入的示例代碼，需要的可以參考一下2022-06-06