React implements the expansion and collapse function of complex search forms
|
Give time time and let the past go. In the previous section, we wrote about the [Search] form, as well as the query and reset functions. This section provides an overview of query forms that require expansion and collapse effects, mainly involving front-end style knowledge. The style effect is as follows:
Idea: Define two components renderAdvancedForm and renderSimpleForm in the Search component. RenderSimpleForm has only five query options, while renderAdvancedForm contains all search options. Click the 'Expand' or 'Collapse' button and call onClick={toggleForm} to switch the form display style. 1. Write renderSimpleForm and renderAdvancedFormUse Col and Row to divide the rows into blocks, and pay attention to adding a click event for the expansion button.
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}
>
Expand <Icon type="down" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
Query</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
Reset</Button>
</Col>
</Row>
</Form>
)
}, [form, handleFormReset, handleSearch, toggleForm])Similarly, you need to use Rol and Row to set two rows, leave a close button in the corresponding position, and add a click function for the close button
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}
>
Collapse<Icon type="up" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
Query</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
Reset</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. Add toggleForm function to switch between 'expand' and 'collapse'
const toggleForm = useCallback(() => {
setExpandForm(!expandForm)
}, [expandForm])3. Render the form effect in the search component as needed
return (
<Card bordered={false}>
<div className={styles.search}>
{expandForm ? renderAdvancedForm : renderSimpleForm}
</div>
</Card>
)4. Attached is the complete search component code
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="Requirement number" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('experimentName', {
initialValue: query.name || ''
})(<Input placeholder="Requirement name" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('userName', {
initialValue: query.name || ''
})(<Input placeholder="Username" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('mobile', { initialValue: query.name || '' })(
<Input placeholder="Phone number" />
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('status', {
initialValue:
query.type === undefined ? '' : query.type.toString()
})(
<Select>
<Option value={''} disabled>
{' '}
Experimental Status {' '}
</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}
>
Expand <Icon type="down" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
Query</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
Reset</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('cannot be higher than the maximum value')
} else if (
value &&
parseInt(value) < parseInt(getFieldValue('priceLow'))
) {
callback('cannot be lower than the minimum value')
} else {
callback()
}
}
return (
<Form layout="inline">
<Row style={{ marginBottom: '20px' }}>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderNumber', {
initialValue: query.name || ''
})(<Input placeholder="Requirement number" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('experimentName', {
initialValue: query.name || ''
})(<Input placeholder="Requirement name" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('userName', {
initialValue: query.name || ''
})(<Input placeholder="Username" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('mobile', { initialValue: query.name || '' })(
<Input placeholder="Phone number" />
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('status', {
initialValue:
query.type === undefined ? '' : query.type.toString()
})(
<Select>
<Option value={''}> Experimental status</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}
>
Collapse<Icon type="up" />
</a>
<Button onClick={handleSearch} className={'searchBtn'}>
<img src={search} alt="" />
Query</Button>
<Button onClick={handleFormReset} className={'resetBtn'}>
<img src={reset} alt="" />
Reset</Button>
</Col>
</Row>
<Row>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('priceLow', {
initialValue: query.name || '',
rules: [{ validator: dataValidate }]
})(<Input placeholder="Total price range" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('priceHigh', {
initialValue: query.name || '',
rules: [{ validator: dataValidate }]
})(<Input placeholder="Total price range" />)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderTimeStart', {
initialValue: query.name || ''
})(
<DatePicker
onChange={change1}
disabledDate={disabledDate1}
placeholder="Order time"
/>
)}
</FormItem>
</Col>
<Col md={4} sm={24}>
<FormItem label="">
{getFieldDecorator('orderTimeEnd', {
initialValue: query.name || ''
})(
<DatePicker
onChange={change2}
disabledDate={disabledDate2}
placeholder="Order time"
/>
)}
</FormItem>
</Col>
</Row>
</Form>
)
}, [form, handleFormReset, handleSearch, time1, time2, toggleForm])
return (
<Card bordered={false}>
<div className={styles.search}>
{expandForm ? renderAdvancedForm : renderSimpleForm}
</div>
</Card>
)
})This concludes this article about implementing the expand-collapse function of complex search forms in React. For more relevant React form expansion and collapse content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Talk about implicit conversion in MySQL
>>: A brief discussion on the differences between FTP, FTPS and SFTP
Recommend
Detailed explanation of installation and configuration of Redis and phpredis extension operation in Ubuntu 18.04 system
This article describes how to install and configu...
A brief talk about calculated properties and property listening in Vue
Table of contents 1. Computed properties Syntax: ...
Mysql splits string into array through stored procedure
To split a string into an array, you need to use ...
Native JavaScript message board
This article shares the specific code of JavaScri...
Explanation of the concept and usage of Like in MySQL
Like means "like" in Chinese, but when ...
Docker generates images through containers and submits DockerCommit in detail
Table of contents After creating a container loca...
Writing tab effects with JS
This article example shares the specific code for...
Detailed explanation of the redirection configuration and practice of Rewrite in Nginx
1: Understand the meaning of address rewriting an...
Vue implements student management function
This article example shares the specific code of ...
Implementation of the list-style-type attribute in front of CSS ordered or unordered lists
example: <html> <head> <style type...
Kali Linux installation VMware tools installation process and VM installation vmtools button gray
Xiaobai records the installation of vmtools: 1. S...
Shell script to monitor MySQL master-slave status
Share a Shell script under Linux to monitor the m...
Installation process of CentOS8 Linux 8.0.1905 (illustration)
As of now, the latest version of CentOS is CentOS...
Detailed explanation of a method to rename procedure in MYSQL
Recently I have used the function of renaming sto...