2024年前端最新【React入门实践】复杂搜索表单的【展开-收起】功能，美团最爱考的前端面试题

前端资料汇总

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

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

)

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])

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 (

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

{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’}>

重置

{getFieldDecorator(‘priceLow’, {

initialValue: query.name || ‘’,

rules: [{ validator: dataValidate }]

})()}

{getFieldDecorator(‘priceHigh’, {

initialValue: query.name || ‘’,

rules: [{ validator: dataValidate }]

})()}

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

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