Reactは複雑な検索フォームの展開と折りたたみ機能を実装します

時間に余裕を持って、過去を忘れましょう。

前のセクションでは、[検索] フォームとクエリおよびリセット機能について説明しました。このセクションでは、主にフロントエンドスタイルの知識を伴う、展開および折りたたみ効果を必要とするクエリフォームの概要を説明します。

スタイルの効果は次のとおりです。

アイデア: 検索コンポーネントに renderAdvancedForm と renderSimpleForm という 2 つのコンポーネントを定義します。RenderSimpleForm には 5 つのクエリオプションしかありませんが、renderAdvancedForm にはすべての検索オプションが含まれています。「展開」または「折りたたみ」ボタンをクリックし、onClick={toggleForm} を呼び出してフォームの表示スタイルを切り替えます。

1. renderSimpleFormとrenderAdvancedFormを書く

Col と Row を使用して行をブロックに分割し、展開ボタンのクリックイベントを追加することに注意してください。

 const renderSimpleForm = useMemo(() => {
    const { getFieldDecorator } = フォーム
    const { クエリ } = getLocation()
    戻る （
      <フォームレイアウト="インライン">
        <行>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">...</フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">...</フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">...</フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">...</フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">...</フォーム項目>
          </Col>
          <Col md={4} sm={24} style={{ textAlign: 'right' }}>
            <a
              onClick={トグルフォーム}
              スタイル={{ marginRight: '15px' }}
              クラス名={styles.a}
            >
              展開 <Icon type="down" />
            </a>
            <Button onClick={handleSearch} className={'searchBtn'}>
              <img src={検索} alt="" />
              クエリ</Button>
            <ボタン onClick={handleFormReset} className={'resetBtn'}>
              <img src={reset} alt="" />
              リセット</Button>
          </Col>
        </行>
      </フォーム>
    ）
  }, [フォーム、handleFormReset、handleSearch、toggleForm])

同様に、RolとRowを使用して2つの行を設定し、対応する位置に閉じるボタンを残し、閉じるボタンのクリック機能を追加する必要があります。

const renderAdvancedForm = useMemo(() => {
    const { getFieldDecorator, getFieldValue } = フォーム
    const { クエリ } = getLocation()
    戻る （
      <フォームレイアウト="インライン">
        <行スタイル={{ marginBottom: '20px' }}>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24} style={{ textAlign: 'right' }}>
            <a
              onClick={トグルフォーム}
              スタイル={{ marginRight: '15px' }}
              クラス名={styles.a}
            >
              折りたたむ<Icon type="up" />
            </a>
            <Button onClick={handleSearch} className={'searchBtn'}>
              <img src={検索} alt="" />
              クエリ</Button>
            <ボタン onClick={handleFormReset} className={'resetBtn'}>
              <img src={reset} alt="" />
              リセット</Button>
          </Col>
        </行>
        <行>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
          <Col md={4} sm={24}><フォーム項目ラベル="">...</フォーム項目></Col>
        </行>
      </フォーム>
    ）
  }, [フォーム、handleFormReset、handleSearch、time1、time2、toggleForm])

2. 「展開」と「折りたたみ」を切り替えるtoggleForm関数を追加する

定数トグルフォーム = useCallback(() => {
    拡張フォームを設定します(拡張フォーム)
  }, [expandForm])

3. 必要に応じて検索コンポーネントにフォーム効果をレンダリングする

戻る （
    <カードの縁取り={false}>
      <div className={styles.search}>
        {expandForm ? renderAdvancedForm : renderSimpleForm}
      </div>
    </カード>
  ）

4. 完全な検索コンポーネントコードを添付します

const検索: any = Form.create()(function({ form, init }: any) {
  const {validateFields} = フォーム
  定数[expandForm, setExpandForm] = useState(false)
  定数[time11, settime11] = useState('')
  定数[time21, settime21] = useState('')
  const [time1, settime1] = useState(moment().format('YYYY-MM-DD'))
  const [time2, settime2] = useState(moment().format('YYYY-MM-DD'))
  定数handleSearch = useCallback(() => {
    検証フィールド((エラー: 任意、データ: 任意) => {
      プッシュパス({
        クエリ: {
          ...データ、
          ページ番号: 1,
          注文時間開始: time11、
          注文時間終了: time21、
          注文番号: data.orderNumber.replace(/\s+/g, ''),
          実験名: data.experimentName.replace(/\s+/g, ''),
          ユーザー名: data.userName.replace(/\s+/g, ''),
          モバイル: data.mobile.replace(/\s+/g, ''),
          priceLow: data.priceLow.replace(/\s+/g, ''),
          価格高: data.priceHigh.replace(/\s+/g, '')
        }
      })
      初期化()
    })
  }, [init, time11, time21, 検証フィールド])
  const handleFormReset = useCallback(() => {
    クリアパス()
    プッシュパス({
      クエリ: { ページサイズ: 10、ページ番号: 1 }
    })
    初期化()
    フォーム.resetFields()
  }, [フォーム、初期化])
  定数トグルフォーム = useCallback(() => {
    拡張フォームを設定します(拡張フォーム)
  }, [expandForm])
  const renderSimpleForm = useMemo(() => {
    const { getFieldDecorator } = フォーム
    const { クエリ } = getLocation()
    戻る （
      <フォームレイアウト="インライン">
        <行>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('orderNumber', {
                初期値: クエリ名 || ''
              })(<Input placeholder="要件番号" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('実験名', {
                初期値: クエリ名 || ''
              })(<Input placeholder="要件名" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('ユーザー名', {
                初期値: クエリ名 || ''
              })(<Input placeholder="ユーザー名" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('mobile', { 初期値: query.name || '' })(
                <入力プレースホルダー="電話番号" />
              )}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('ステータス', {
                初期値:
                  query.type === 未定義? '' : query.type.toString()
              })(
                <選択>
                  <オプション値={''} 無効>
                    {' '}
                    実験ステータス {' '}
                  </オプション>
                  {testStatus.map((v: any) => (
                    <オプションキー={v.key} 値={v.key}>
                      {動詞値}
                    </オプション>
                  ))}
                </選択>
              )}
            </フォーム項目>
          </Col>
 
          <Col md={4} sm={24} style={{ textAlign: 'right' }}>
            <a
              onClick={トグルフォーム}
              スタイル={{ marginRight: '15px' }}
              クラス名={styles.a}
            >
              展開 <Icon type="down" />
            </a>
            <Button onClick={handleSearch} className={'searchBtn'}>
              <img src={検索} alt="" />
              クエリ</Button>
            <ボタン onClick={handleFormReset} className={'resetBtn'}>
              <img src={reset} alt="" />
              リセット</Button>
          </Col>
        </行>
      </フォーム>
    ）
  }, [フォーム、handleFormReset、handleSearch、toggleForm])
  const renderAdvancedForm = useMemo(() => {
    const { getFieldDecorator, getFieldValue } = フォーム
    const { クエリ } = getLocation()
 
    関数 disabledDate1(現在: 任意) {
      現在の値を返す && 現在の値 > 時間2
    }
    関数 disabledDate2(現在: 任意) {
      現在の値を返す && 現在の値 < 時間1
    }
    関数 change1(日付: 任意、日付文字列: 任意) {
      settime1(日付)
      settime11(日付文字列)
    }
    関数 change2(日付: 任意、日付文字列: 任意) {
      settime2(日付)
      settime21(日付文字列)
    }
    const dataValidate = (ルール: 任意、値: 任意、コールバック: 任意) => {
      if (値 && parseInt(値) > parseInt(getFieldValue('priceHigh'))) {
        コールバック('最大値を超えることはできません')
      } それ以外の場合 (
        価値 ＆＆
        parseInt(値) < parseInt(getFieldValue('priceLow'))
      ）{
        コールバック('最小値より低くすることはできません')
      } それ以外 {
        折り返し電話（）
      }
    }
    戻る （
      <フォームレイアウト="インライン">
        <行スタイル={{ marginBottom: '20px' }}>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('orderNumber', {
                初期値: クエリ名 || ''
              })(<Input placeholder="要件番号" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('実験名', {
                初期値: クエリ名 || ''
              })(<Input placeholder="要件名" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('ユーザー名', {
                初期値: クエリ名 || ''
              })(<Input placeholder="ユーザー名" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('mobile', { 初期値: query.name || '' })(
                <入力プレースホルダー="電話番号" />
              )}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('ステータス', {
                初期値:
                  query.type === 未定義? '' : query.type.toString()
              })(
                <選択>
                  <オプション値={''}> 実験的なステータス</オプション>
                  {testStatus.map((v: any) => (
                    <オプションキー={v.key} 値={v.key}>
                      {動詞値}
                    </オプション>
                  ))}
                </選択>
              )}
            </フォーム項目>
          </Col>
 
          <Col md={4} sm={24} style={{ textAlign: 'right' }}>
            <a
              onClick={トグルフォーム}
              スタイル={{ marginRight: '15px' }}
              クラス名={styles.a}
            >
              折りたたむ<Icon type="up" />
            </a>
            <Button onClick={handleSearch} className={'searchBtn'}>
              <img src={検索} alt="" />
              クエリ</Button>
            <ボタン onClick={handleFormReset} className={'resetBtn'}>
              <img src={reset} alt="" />
              リセット</Button>
          </Col>
        </行>
        <行>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('priceLow', {
                初期値: クエリ名 || ''
                ルール: [{ バリデータ: dataValidate }]
              })(<Input placeholder="合計価格範囲" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('priceHigh', {
                初期値: クエリ名 || ''
                ルール: [{ バリデータ: dataValidate }]
              })(<Input placeholder="合計価格範囲" />)}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('orderTimeStart', {
                初期値: クエリ名 || ''
              })(
                <日付ピッカー
                  onChange={change1}
                  無効日付={無効日付1}
                  placeholder="注文時間"
                />
              )}
            </フォーム項目>
          </Col>
          <Col md={4} sm={24}>
            <フォーム項目ラベル="">
              {getFieldDecorator('orderTimeEnd', {
                初期値: クエリ名 || ''
              })(
                <日付ピッカー
                  onChange={change2}
                  無効日付={無効日付2}
                  placeholder="注文時間"
                />
              )}
            </フォーム項目>
          </Col>
        </行>
      </フォーム>
    ）
  }, [フォーム、handleFormReset、handleSearch、time1、time2、toggleForm])
 
  戻る （
    <カードの縁取り={false}>
      <div className={styles.search}>
        {expandForm ? renderAdvancedForm : renderSimpleForm}
      </div>
    </カード>
  ）
})

これで、React で複雑な検索フォームの展開と折りたたみ機能を実装する方法についての記事は終了です。React フォームの展開と折りたたみに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: