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

2024-04-02 19:55

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

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

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

样式效果如下：

思路：在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 class="lazy" data-src={search} alt="" />
              查询
            </Button>
            <Button onClick={handleFormReset} className={'resetBtn'}>
              <img class="lazy" data-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 class="lazy" data-src={search} alt="" />
              查询
            </Button>
            <Button onClick={handleFormReset} className={'resetBtn'}>
              <img class="lazy" data-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 class="lazy" data-src={search} alt="" />
              查询
            </Button>
            <Button onClick={handleFormReset} className={'resetBtn'}>
              <img class="lazy" data-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 class="lazy" data-src={search} alt="" />
              查询
            </Button>
            <Button onClick={handleFormReset} className={'resetBtn'}>
              <img class="lazy" data-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

阅读原文内容投诉