React实现复杂搜索表单的展开收起功能

2024-04-02 19:04:59 927人浏览泡泡鱼

摘要

给时间时间，让过去过去。上节我们写过了【搜索】表单，以及查询、重置功能。本节对于需要展开收起效果的查询表单进行概述，主要涉及前端样式知识。样式效果如下： &nbs

给时间时间，让过去过去。

上节我们写过了【搜索】表单，以及查询、重置功能。本节对于需要展开收起效果的查询表单进行概述，主要涉及前端样式知识。

样式效果如下：

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

1. 写renderSimpleForm和renderAdvancedForm

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


 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}
            >
              展开 <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])

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


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}
            >
              收起 <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="">...</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.添加toggleForm函数实现‘展开'‘收起'切换


const toggleForm = useCallback(() => {
    setExpandForm(!expandForm)
  }, [expandForm])

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


return (
    <Card bordered={false}>
      <div className={styles.search}>
        {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="下单时间"
                />
              )}
            </FormItem>
          </Col>
        </Row>
      </Form>
    )
  }, [form, handleFormReset, handleSearch, time1, time2, toggleForm])
 
  return (
    <Card bordered={false}>
      <div className={styles.search}>
        {expandForm ? renderAdvancedForm : renderSimpleForm}
      </div>
    </Card>
  )
})

到此这篇关于React实现复杂搜索表单的展开-收起功能的文章就介绍到这了,更多相关React表单展开收起内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React实现复杂搜索表单的展开收起功能

本文链接: https://www.lsjlt.com/news/136780.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React实现复杂搜索表单的展开收起功能

给时间时间，让过去过去。上节我们写过了【搜索】表单，以及查询、重置功能。本节对于需要展开收起效果的查询表单进行概述，主要涉及前端样式知识。样式效果如下： &nbs...

99+

2024-04-02
vue+elementUl实现展开和收起搜索功能

目录实现效果如下：需求：需求分析：解决思路：代码解析：实现效果如下：需求：由于后台搜索选项有很多，影响页面美观，所以一进来要隐藏一部分搜索项，只保留1行，点击【展开搜索】...

99+

2023-01-16

vue +elementUl展开和收起 vue 展开和收起
Vue实现文本展开收起功能

本文实例为大家分享了Vue实现文本展开收起功能的具体代码，供大家参考，具体内容如下先说说需求，以及实现的需求 1、移动端H5，发表留言后跳转到评论列表，超过5行文字，多余的需要隐藏...

99+

2024-04-02
jQuery实现文章收起与展开功能

本文实例为大家分享了jQuery实现文章收起与展开功能的具体代码，供大家参考，具体内容如下废话不多说，直接上代码 <!DOCTYPE html> <html ...

99+

2024-04-02
vue列表单项展开收缩功能怎么实现

这篇文章主要讲解了“vue列表单项展开收缩功能怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue列表单项展开收缩功能怎么实现”吧！代码逻辑###template部分：已去除与本文不...

99+

2023-07-04
React文字展开收起组件的实现示例

目录前言背景开发1.1 定义组件所需字段1.2 获取截断后的文字1.3 获取展开收起按钮1.4 展开收起逻辑1.5 完整代码1.5.1 逻辑代码1.5.2 样式代码1.6 安装使用组...

99+

2024-04-02
element实现导航栏收起展开功能及思路

目录element 导航栏收起展开实现思路PS：Vue结合element-ui实现导航菜单展开收缩小功能上篇文章介绍了vue使用ElementUI时导航栏默认展开功能的实现，今天介绍...

99+

2023-01-16

element 导航栏收起展开 element 导航栏收起 element 导航栏 element-ui展开收缩
Vue3+Element+Ts实现表单的基础搜索重置等功能

从Vue2的写法转变为Vue3的格式之后，会有一些写法和代码结构的改变，这里对一些重点进行介绍。代码结构：写法一(推荐)： <script setup lang=...

99+

2024-04-02
Python实现简单的索引排序与搜索功能

今天，我上的课，学了索引排序与搜索。让我们用Python实现，觉得有点意思就跟大家分享一波。代码如下图： import requests import re def News...

99+

2024-04-02
Vue实现简单搜索功能的示例代码

目录1、概述2、功能逻辑2.1功能流程2.2 流程图3、功能实现3.1 vue组件化3.2 代码3.3 动态效果1、概述在vue项目中，搜索功能是我们经常需要使用的一个场景，最常用...

99+

2023-03-19

Vue实现搜索功能 Vue搜索功能 Vue搜索
PHP实现简单搜索功能的步骤详解

PHP是一种广泛应用于Web开发的服务器端脚本语言，其强大的特性和灵活性使其成为许多网站和应用程序的首选。在许多Web应用程序中，搜索功能是必不可少的一部分，能够帮助用户快速找到需要的...

99+

2024-03-06

搜索 php 步骤 sql语句
Vue3+Element+Ts如何实现表单的基础搜索重置等功能

本篇内容主要讲解“Vue3+Element+Ts如何实现表单的基础搜索重置等功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3+Element+Ts如何实现表单的基础搜索重置等功能”吧!...

99+

2023-06-22
react使用antd的上传组件实现文件表单一起提交功能

本篇内容主要讲解“react使用antd的上传组件实现文件表单一起提交功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react使用antd的上传组件实现文件表单一起提交功能”吧!项目中需要实...

99+

2023-06-20
vue列表单项展开收缩功能之this.$refs的示例分析

这篇文章主要为大家展示了“vue列表单项展开收缩功能之this.$refs的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue列表单项展开收缩功能之t...

99+

2024-04-02
Angular如何实现搜索、过滤、批量删除、添加、表单验证功能

这篇文章将为大家详细讲解有关Angular如何实现搜索、过滤、批量删除、添加、表单验证功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。具体代码如下所示；<!DOC...

99+

2024-04-02
react使用antd的上传组件实现文件表单一起提交功能(完整代码)

最近在刚刚开始使用react做项目，非常不熟练，非常小白。小白同学可以阅读了，因为我会写的非常简单，直白。项目中需要实现表单中带附件提交，上传文件不单独保存调接口。 impor...

99+

2024-04-02
Angular如何实现较为复杂的表格过滤，删除功能

这篇文章主要介绍了Angular如何实现较为复杂的表格过滤，删除功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。具体如下：先来看看运行效果...

99+

2024-04-02
怎么使用elementUI组件实现表格的分页及搜索功能

今天小编给大家分享一下怎么使用elementUI组件实现表格的分页及搜索功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。主...

99+

2023-07-05
React如何利用Antd的Form组件实现表单功能详解

一、构造组件 1、表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。这里先引用了封装的表单域 <Form.Item /> 2、使用For...

99+

2024-04-02
如何使用MySQL和Java实现一个简单的搜索引擎功能

要使用MySQL和Java实现一个简单的搜索引擎功能，可以按照以下步骤进行：1. 创建数据库：首先，使用MySQL Workbenc...

99+

2023-10-20

MySQL