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
JavaScript realizes the queue structure process
Table of contents 1. Understanding Queues 2. Enca...
docker run -v mounts data volumes abnormally, and the container status is always restarting
Problems: After adding the -v parameter to docker...
Tomcat8 uses cronolog to split Catalina.Out logs
background If the catalina.out log file generated...
MySQL operations: JSON data type operations
In the previous article, we introduced the detail...
Instructions for using MySQL isolation Read View
Which historical version can the current transact...
Vue implements sample code to disable browser from remembering password function
Find information Some methods found on the Intern...
Viewing and analyzing MySQL execution status
When you feel that there is a problem with MySQL ...
How to implement interception of URI in nginx location
illustrate: Root and alias in location The root d...
How to set up a deployment project under Linux system
1. Modify the firewall settings and open the corr...
How to set a fixed IP address for a VMware virtual machine (graphic tutorial)
1. Select Edit → Virtual Network Editor in the me...
Command to view binlog file creation time in Linux
Table of contents background analyze method backg...
Analysis of the causes of accidents caused by Unicode signature BOM
Maybe you are using include files here, which is u...
How to use Portainer to build a visual interface for Docker
Portainer Introduction Portainer is a graphical m...
Description of the default transaction isolation level of mysql and oracle
1. Transaction characteristics (ACID) (1) Atomici...
MySQL essential basics: grouping function, aggregate function, grouping query detailed explanation
Table of contents 1. Simple to use 2. Use DISTINC...