ホームページ >ウェブフロントエンド >jsチュートリアル >カスケード フォーム React Native Advanced
カスケード フォーム フィールドを処理するための 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() { . . . }
フィールドのこれらすべてのプロパティには利点があり、動的レンダリングを処理するのに役立ちます。
フォーム フィールド オブジェクトのキーを反復処理することで、ドロップダウン フィールドを動的にレンダリングし、必要なすべてのプロパティをフォーム フィールド オブジェクトで使用できるようになります。
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) => {}} />
よし、すべてのドロップダウンにそれぞれのリストが表示されました。
ドロップダウン リストを表示する前に、その親フィールドを検証する必要があります。したがって、フォームフィールドオブジェクトから親フィールドを取得します。次に、それらを 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() { . . . } . . .
最後に、フォームフィールドをリセットするオプションを提供します。
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 サイトの他の関連記事を参照してください。