文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

给时间时间,让过去过去。

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

样式效果如下:

 思路:在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表单展开收起内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯