首页 开发前沿 JavaScript 正文
我要投稿

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

JavaScript
2022-04-15 0 566

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

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

样式效果如下：

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

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

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

收藏 (0) 点赞 (0)

免责声明：
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。 不得使用于非法商业用途，不得违反国家法律。否则后果自负！

2、本站信息来自网络，版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序，请支持正版源码、软件，购买注册，得到更好的正版服务。
如有侵犯你版权的，请邮件与我们联系处理（邮箱:skknet@qq.com），本站将立即改正。

NICE源码网 JavaScript React实现复杂搜索表单的展开收起功能 https://www.niceym.com/25053.html

上一篇： React之Hooks详解
下一篇： 基于Vue3的全屏拖拽上传组件
猜你喜欢
TA的动态
热门标签
热门文章
随机推荐
首页 模板 菜单 开发 我的