社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > 級聯表單 React Native 高級

級聯表單 React Native 高級

DDD
發布： 2024-12-08 13:00:18
原創
1036 人瀏覽過

我想分享我處理級聯表單欄位的 3 種方法。

  1. 第一種方法是通用的，使用狀態變數。
  2. 第二種是使用普通變數和一個布林狀態變數來觸發狀態效果（刷新頁面）。
  3. 第三種是帶有普通變數的動態表單欄位。

這是第三種方法，我們將處理動態表單欄位。

注意，如果你看看前面的兩種方法，會比較容易理解這篇文章。

第一種方法，Cascade Form Basic
第二種方法，改良級聯形式

我們開始吧，

內容

  • 基本形式
  • 表單欄位物件
  • 動態場渲染
  • 範例資料
  • 頁面載入
  • 加載國家
  • OnChange
  • 載入狀態
  • 負載休息（城市、村莊、街道）
  • 驗證
  • 重置表格

基本形式

這是一個帶有 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 (. . .);
}
登入後複製
登入後複製

當選擇 Country 值時，必須載入 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

驗證

在顯示下拉清單之前，我們需要先驗證其父欄位。因此，我們將從表單欄位物件中取得父欄位。然後逐一迭代它們，驗證其值並在必要時顯示警告。 

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 高級的詳細內容。更多資訊請關注PHP中文網其他相關文章！

來源：dev.to
上一篇：如何在 JavaScript 正規表示式中正確使用反斜線以避免語法錯誤？ 下一篇：Object.create() 與 new SomeFunction()：什麼時候應該使用它們？
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
function_exists()無法判定自訂函數 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
來自於 2024-04-29 11:01:01
0
3
2221
google 瀏覽器 手機版顯示的怎麼實現 老師您好，google 瀏覽器怎麼變成手機版樣式的？
來自於 2024-04-23 00:22:19
0
11
2363
子窗口操作父窗口，輸出沒反應 前兩句可執行，最後一句沒辦法應
來自於 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
1932
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板