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

}, [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="下单时间"

            />

          )}

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

          {getFieldDecorator('orderTimeEnd', {

            initialValue: query.name || ''

          })(

            <DatePicker

              onChange={change2}

              disabledDate={disabledDate2}

              placeholder="下单时间"

            />

          )}

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-NFlBDijY-1718727229739)]