コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > カスケード フォーム React Native Advanced

カスケード フォーム React Native Advanced

DDD
リリース： 2024-12-08 13:00:18
オリジナル
1036 人が閲覧しました

カスケード フォーム フィールドを処理するための 3 つのアプローチを共有したいと思います。

  1. 最初のアプローチは一般的なもので、状態変数を使用します。
  2. 2 つ目は、通常の変数と 1 つのブール状態変数を使用して、状態効果 (ページの更新) をトリガーすることです。
  3. 3 番目は、通常の変数を含む動的フォームフィールドです。

これは 3 番目のアプローチであり、動的なフォーム フィールドを扱います。

注、前の 2 つのアプローチを参照すると、この投稿を理解しやすくなります。

最初のアプローチ、Cascade Form Basic
2 番目のアプローチ、カスケード フォームが改善されました

始めましょう、

コンテンツ

  • 基本形式
  • フォームフィールドオブジェクト
  • 動的フィールドレンダリング
  • サンプルデータ
  • ページの読み込み
  • 国をロード
  • 変更時
  • ロード状態
  • ロードレスト (都市、村、通り)
  • 検証
  • フォームをリセット

基本形

これは 5 つのドロップダウン フィールドを持つ静的フォーム ページです。

import React, { useState, useEffect } from "react";
import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import { Snackbar } from "react-native-paper";

var snackMsg = "";
export default function App() {
  const [refreshPage, setRefreshPage] = useState(false);
  const [visible, setVisible] = useState(false);

  const onToggleSnackBar = () => setVisible(!visible);
  const onDismissSnackBar = () => setVisible(false);

  const resetForm = () => {
  };

  return (
    <ScrollView>



<p>refreshPage state variable is used to refresh the page in all the situations. </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173363402014343.jpg" alt="Cascading Form React Native Advanced" /></p>

<p>Now, These fields are going to be converted as dynamic. </p>

<h3>
  
  
  Form Field Object
</h3>

<p>Previously we had 3 separate objects for 3 different fields, but here all fields data placed under one form field object.<br>
</p>

<pre class="brush:php;toolbar:false"> . . .
const formFields = {
  country: {
    fieldId: "country",
    label: "Country",
    labelField: "name",
    valueField: "countryId",
    parents: [],
    list: [],
    selectedItem: {},
    selectedValue: null,
    onValueSelected: () => null,
  },
  state: {
    fieldId: "state",label: "State",labelField: "name",valueField: "stateId",
    parents: ["country"],list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  city: {
    fieldId: "city",label: "City",labelField: "name",valueField: "cityId",
    parents: ["country", "state"],list: [],selectedItem: {},
    selectedValue: null,onValueSelected: () => null,
  },
  village: {
    fieldId: "village",label: "Village",labelField: "name",
    valueField: "villageId",
    parents: ["country", "state", "city"],
    list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  street: {
    fieldId: "street",label: "Street",labelField: "name",
    valueField: "streetId",
    parents: ["country", "state", "city", "village"],
    list: [],selectedItem: {},selectedValue: null,onValueSelected: () => null,
  },
};

 . . .
export default function App() {
   . . .
}
ログイン後にコピー
ログイン後にコピー

フィールドのこれらすべてのプロパティには利点があり、動的レンダリングを処理するのに役立ちます。

  • fieldId フィールドの ID
  • label フィールドの名前を表示
  • labelField は、ドロップダウン リスト配列
    • 内のドロップダウン ラベル フィールドを示します。
  • valueField はドロップダウン値フィールドを表します
  • 親フィールドのparents配列。検証に使用されます
  • リスト ドロップダウン リスト配列
  • selectedItem ドロップダウンの選択された項目オブジェクト全体
  • selectedValue 選択された値
  • onValueSelected これは関数プロパティであり、ドロップダウン値が選択/変更されたときに使用/呼び出されます。最初は空のメソッドとして割り当てられました。

ダイナミックフィールドレンダリング

フォーム フィールド オブジェクトのキーを反復処理することで、ドロップダウン フィールドを動的にレンダリングし、必要なすべてのプロパティをフォーム フィールド オブジェクトで使用できるようになります。

export default function App() {
  . . .
    return (
    <View>



<p>handle focus / blur<br>
</p>

<pre class="brush:php;toolbar:false">var focusField = "";
export default function App() {
. . .

 const changeFocusField = (fld = "") => {
  focusField = fld;
  setRefreshPage(!refreshPage);
 };
. . .
}
ログイン後にコピー
ログイン後にコピー
<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />
ログイン後にコピー
ログイン後にコピー

サンプルデータ

国、州、市、村、番地フィールドのサンプル データ。

const listCountry = [
  { countryId: "1", name: "india" },
  { countryId: "2", name: "uk" },
  { countryId: "3", name: "canada" },
  { countryId: "4", name: "us" },
];

const listSate = [
  { stateId: "1", countryId: "1", name: "state1_india" },
  { stateId: "4", countryId: "2", name: "state1_uk" },
  { stateId: "7", countryId: "3", name: "state1_canada" },
  { stateId: "10", countryId: "4", name: "state1_us" },
];

const listCity = [
  { cityId: "1", stateId: "1", countryId: "1", name: "city1_state1_country1" },
  { cityId: "5", stateId: "2", countryId: "1", name: "city5_state2_country1" },
  {
    cityId: "21",stateId: "7",countryId: "3",name:"city21_state7_country3",
  },
  {
    cityId: "26",stateId: "9",countryId: "3",name: "city26_state9_country3",
  },
];

const listVillage = [
  { cityId: "1", villageId: "1", name: "village 1  city 1" },
  { cityId: "2", villageId: "5", name: "village 5  city 2" },
  { cityId: "3", villageId: "9", name: "village 9  city 3" },
  { cityId: "4", villageId: "10", name: "village 10  city 4" },
];

const listStreet = [
  { villageId: "1", streetId: "1", name: "village 1 street 1" },
  { villageId: "1", streetId: "109", name: "village 1 street 109" },
  { villageId: "2", streetId: "2", name: "village 2 street 2" },
  { villageId: "2", streetId: "110", name: "village 2 street 110" },
];
 . . .
export default function App() {
  . . .
}
 . . .
ログイン後にコピー
ログイン後にコピー

ページ読み込み時

まず機能面で、いくつかの重要なことをセットアップする必要があります。 空のメソッドをプロパティ onValueSelected に割り当てたことを思い出してください。ここで、実際のメソッドを割り当てます。したがって、5 つのメソッドを作成し、それぞれのフォーム フィールドに割り当てる必要があります。

export default function App() {
  . . .
  const allValuesSelected = () => {
    console.log("All fields value selected");
  };

  const loadStreet = async () => {};

  const loadVillage = async () => {};

  const loadCity = async () => {};

  const loadState = async () => {};

  const loadCountry = async () => {};

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;    
  };

  return (. . .);
}
ログイン後にコピー
ログイン後にコピー

国の値を選択すると、STATE リストをロードする必要があります。そのため、ここでは、loadState メソッドを Country の onValueSelected に割り当てています。他のメソッドも同様に割り当てられます。

  useEffect(() => {
    loadPageData();
  }, []);

  return (. . .);
ログイン後にコピー

国をロード

サンプル データから国リストを読み込み、最初のページ読み込み時に呼び出します。

  const loadCountry = async () => {
    formFields.country.list = [...listCountry];
    setRefreshPage(!refreshPage);
  };

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;

    loadCountry();
  };
ログイン後にコピー

変更時

ドロップダウン フィールドの値が選択されている場合は、それぞれのフォーム フィールドの値を設定し、フォーカスを削除して、次のドロップダウン リストをロードする必要があります。

return (
  . . .
  <ZDropDown
    // . . .
    onChange={(item) => {
      fld.selectedItem = item;
      fld.selectedValue = item[fld.valueField];
      focusField = "";
      fld.onValueSelected();
    }}
  />
  . . .
);
ログイン後にコピー

onValueSelected は便利ですよね?

ロード状態

最初のドロップダウン (国) が変更されると、残りのフィールドも変更されます。したがって、他のすべてのフォームフィールドのリストとデータをクリアする必要があります。このために、指定されたフィールドから最後のフィールドまでの値をクリアできるメソッドを作成します。

import React, { useState, useEffect } from "react";
import { ScrollView, View, Text, StyleSheet, TouchableOpacity } from "react-native";
import { Dropdown } from "react-native-element-dropdown";
import { Snackbar } from "react-native-paper";

var snackMsg = "";
export default function App() {
  const [refreshPage, setRefreshPage] = useState(false);
  const [visible, setVisible] = useState(false);

  const onToggleSnackBar = () => setVisible(!visible);
  const onDismissSnackBar = () => setVisible(false);

  const resetForm = () => {
  };

  return (
    <ScrollView>



<p>refreshPage state variable is used to refresh the page in all the situations. </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173363402014343.jpg" alt="Cascading Form React Native Advanced" /></p>

<p>Now, These fields are going to be converted as dynamic. </p>

<h3>
  
  
  Form Field Object
</h3>

<p>Previously we had 3 separate objects for 3 different fields, but here all fields data placed under one form field object.<br>
</p>

<pre class="brush:php;toolbar:false"> . . .
const formFields = {
  country: {
    fieldId: "country",
    label: "Country",
    labelField: "name",
    valueField: "countryId",
    parents: [],
    list: [],
    selectedItem: {},
    selectedValue: null,
    onValueSelected: () => null,
  },
  state: {
    fieldId: "state",label: "State",labelField: "name",valueField: "stateId",
    parents: ["country"],list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  city: {
    fieldId: "city",label: "City",labelField: "name",valueField: "cityId",
    parents: ["country", "state"],list: [],selectedItem: {},
    selectedValue: null,onValueSelected: () => null,
  },
  village: {
    fieldId: "village",label: "Village",labelField: "name",
    valueField: "villageId",
    parents: ["country", "state", "city"],
    list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  street: {
    fieldId: "street",label: "Street",labelField: "name",
    valueField: "streetId",
    parents: ["country", "state", "city", "village"],
    list: [],selectedItem: {},selectedValue: null,onValueSelected: () => null,
  },
};

 . . .
export default function App() {
   . . .
}
ログイン後にコピー
ログイン後にコピー

このメソッドは、他のすべてのドロップダウン フィールドおよびページのリセット目的に使用できます。

export default function App() {
  . . .
    return (
    <View>



<p>handle focus / blur<br>
</p>

<pre class="brush:php;toolbar:false">var focusField = "";
export default function App() {
. . .

 const changeFocusField = (fld = "") => {
  focusField = fld;
  setRefreshPage(!refreshPage);
 };
. . .
}
ログイン後にコピー
ログイン後にコピー

状態ドロップダウン リストが完全に読み込まれるようになりました。

残りをロード (都市、村、通り)

前と同様に、残りのフィールドのデータをロードします。

<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />
ログイン後にコピー
ログイン後にコピー

よし、すべてのドロップダウンにそれぞれのリストが表示されました。

Cascading Form React Native Advanced

検証

ドロップダウン リストを表示する前に、その親フィールドを検証する必要があります。したがって、フォームフィールドオブジェクトから親フィールドを取得します。次に、それらを 1 つずつ繰り返し、値を検証し、必要に応じて警告を表示します。

const listCountry = [
  { countryId: "1", name: "india" },
  { countryId: "2", name: "uk" },
  { countryId: "3", name: "canada" },
  { countryId: "4", name: "us" },
];

const listSate = [
  { stateId: "1", countryId: "1", name: "state1_india" },
  { stateId: "4", countryId: "2", name: "state1_uk" },
  { stateId: "7", countryId: "3", name: "state1_canada" },
  { stateId: "10", countryId: "4", name: "state1_us" },
];

const listCity = [
  { cityId: "1", stateId: "1", countryId: "1", name: "city1_state1_country1" },
  { cityId: "5", stateId: "2", countryId: "1", name: "city5_state2_country1" },
  {
    cityId: "21",stateId: "7",countryId: "3",name:"city21_state7_country3",
  },
  {
    cityId: "26",stateId: "9",countryId: "3",name: "city26_state9_country3",
  },
];

const listVillage = [
  { cityId: "1", villageId: "1", name: "village 1  city 1" },
  { cityId: "2", villageId: "5", name: "village 5  city 2" },
  { cityId: "3", villageId: "9", name: "village 9  city 3" },
  { cityId: "4", villageId: "10", name: "village 10  city 4" },
];

const listStreet = [
  { villageId: "1", streetId: "1", name: "village 1 street 1" },
  { villageId: "1", streetId: "109", name: "village 1 street 109" },
  { villageId: "2", streetId: "2", name: "village 2 street 2" },
  { villageId: "2", streetId: "110", name: "village 2 street 110" },
];
 . . .
export default function App() {
  . . .
}
 . . .
ログイン後にコピー
ログイン後にコピー

Cascading Form React Native Advanced

フォームをリセット

最後に、フォームフィールドをリセットするオプションを提供します。

export default function App() {
  . . .
  const allValuesSelected = () => {
    console.log("All fields value selected");
  };

  const loadStreet = async () => {};

  const loadVillage = async () => {};

  const loadCity = async () => {};

  const loadState = async () => {};

  const loadCountry = async () => {};

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;    
  };

  return (. . .);
}
ログイン後にコピー
ログイン後にコピー

すべて完了しました。ここでは、動的なフォーム フィールドの処理、フィールドのレンダリング、データのロードと検証の方法について説明しました。

これらは、カスケード フォーム フィールドを処理するための私の 3 つのアプローチです。

この投稿/シリーズに役立つ内容が含まれていると幸いです。ありがとう。

完全なコードはこちら

以上がカスケード フォーム React Native Advancedの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：JavaScript 正規表現でバックスラッシュを正しく使用して構文エラーを回避する方法 次の記事：Object.create() と new SomeFunction(): それぞれをいつ使用する必要がありますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2221
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2364
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1976
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1862
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1933
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート