【React入门实践】复杂搜索表单的【展开-收起】功能

2401_84091243

于 2024-05-15 18:12:04 发布

阅读量212

点赞数 5

分类专栏：程序员文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/2401_84091243/article/details/138918158

版权

程序员专栏收录该内容

301 篇文章 0 订阅

订阅专栏

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

                {' '}

                实验状态{' '}

              </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={''}> 实验状态 </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="下单时间"

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

[外链图片转存中…(img-URf4E5dU-1715767906623)]

[外链图片转存中…(img-2gO1hIqH-1715767906624)]

[外链图片转存中…(img-r8ji5dv1-1715767906624)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

2401_84091243

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【React入门实践】复杂搜索表单的【展开-收起】功能

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
复制链接

扫一扫