2024年【React入门实践】复杂搜索表单的【展开-收起】功能(2)，2024年最新熬夜整理最全面的HTML字符实体

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

 思路：在Search组件中定义两个组件renderAdvancedForm，renderSimpleForm,其中renderSimpleForm中只有五个查询选项，而在renderAdvancedForm包含所有的搜索选项。点击’展开‘’收起‘按钮调用onClick={toggleForm}切换form显示样式即可。

1. 写renderSimpleForm和renderAdvancedForm

使用Col和Row进行分行分块，并注意为展开按钮添加点击事件。

const renderSimpleForm = useMemo(() => {

const { getFieldDecorator } = form

const { query } = getLocation()

return (

…

…

…

…

…

<a

onClick={toggleForm}

style={{ marginRight: ‘15px’ }}

className={styles.a}

展开

<Button onClick={handleSearch} className={‘searchBtn’}>

查询

<Button onClick={handleFormReset} className={‘resetBtn’}>

重置

)

}, [form, handleFormReset, handleSearch, toggleForm])

同理，需要使用Rol和Row设置两行，并在对应位置空出收起按钮，为收起按钮添加点击函数

const renderAdvancedForm = useMemo(() => {

const { getFieldDecorator, getFieldValue } = form

const { query } = getLocation()

return (

<Row style={{ marginBottom: ‘20px’ }}>

... ... ... ... ...

<a

onClick={toggleForm}

style={{ marginRight: ‘15px’ }}

className={styles.a}

收起

<Button onClick={handleSearch} className={‘searchBtn’}>

查询

<Button onClick={handleFormReset} className={‘resetBtn’}>

重置

... ... ... ...

)

}, [form, handleFormReset, handleSearch, time1, time2, toggleForm])

2.添加toggleForm函数实现‘展开’‘收起’切换

const toggleForm = useCallback(() => {

setExpandForm(!expandForm)

}, [expandForm])

3.在search组件中按情况渲染表单效果

return (

{expandForm ? renderAdvancedForm : renderSimpleForm}

)

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 (

{getFieldDecorator(‘orderNumber’, {

initialValue: query.name || ‘’

})()}

{getFieldDecorator(‘experimentName’, {

initialValue: query.name || ‘’

})()}

{getFieldDecorator(‘userName’, {

initialValue: query.name || ‘’

})()}

{getFieldDecorator(‘mobile’, { initialValue: query.name || ‘’ })(

)}

{getFieldDecorator(‘status’, {

initialValue:

query.type === undefined ? ‘’ : query.type.toString()

})(

{’ '}

实验状态{’ '}

{testStatus.map((v: any) => (

{v.value}

))}

)}

<a

onClick={toggleForm}

style={{ marginRight: ‘15px’ }}

className={styles.a}

展开

<Button onClick={handleSearch} className={‘searchBtn’}>

查询

<Button onClick={handleFormReset} className={‘resetBtn’}>

重置

)

}, [form, handleFormReset, handleSearch, toggleForm])

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总