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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: FTP、FTPS、SFTPの違いについて簡単に説明します
推薦する
Vue px to rem 構成の詳細な説明
目次方法1 1. 構成とインストールの手順:方法2方法3要約する方法1 1. 構成とインストールの手...
CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。
まとめ：以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。...
MySQL で時刻と日付の型を保存する際の選択問題を分析する
一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...
CSS における @ の使用法の概要 (例と説明付き)
@ ルールは、CSS の実行または動作に関する指示を提供する宣言です。各宣言は @ で始まり、その...
CSS レスポンシブ レイアウト システムの例コード
レスポンシブ レイアウト システムは、今日の一般的な CSS フレームワークではすでに非常に一般的で...
Linux での crontab スケジュール実行コマンドの詳細な説明
LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | grep ...
MySQL で特定の日、月、または年のデータをクエリするためのコードの詳細な説明
今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...
複数のサーバーにNginxリバースプロキシを実装する方法
Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...
フロントエンド開発一般マニュアル（ツール、Webサイト、経験などを含む）
今日は何もすることがなかったので、いくつかのツール（オンラインとクライアント）、よく使用する URL...
Dockerでパラメータ変数を外部から指定する方法
この記事は主にDockerでパラメータ変数を外部から指定する方法を紹介します。この記事のサンプルコー...
mysql binlog (バイナリログ) を表示する方法
たとえば、新しいテーブルを作成したり、既存のテーブルのデータを更新したりすると、これらのイベントは、...
CSS画像結合技術（スプライト画像）の詳しい説明
CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...
MySQLはフィールドからカンマ区切りの値を取り出して新しいフィールドを形成します
1例: 図1のフィールドを図2に分割するには アカウントIDを選択、 サブストリングインデックス(サ...
Tomcat ディレクトリ構造の詳細な紹介
tomcat の解凍されたディレクトリを開くと、次のディレクトリ構造が表示されます。 1.Tomca...
ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験（グラフィックチュートリアル）
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...