Cascading Form React Native Advanced-tutorial js-php.cn

Saya ingin berkongsi 3 pendekatan saya dalam mengendalikan medan borang lata.

Pendekatan pertama adalah umum, menggunakan pembolehubah keadaan.
Kedua ialah menggunakan pembolehubah biasa dan satu pembolehubah keadaan boolean untuk mencetuskan kesan keadaan (segarkan halaman).
Ketiga ialah, medan bentuk dinamik dengan pembolehubah biasa.

Ini adalah pendekatan ke-3 dan kami akan berurusan dengan medan bentuk dinamik.

Perhatian, lebih mudah untuk memahami siaran ini jika anda melihat 2 pendekatan sebelumnya.

Pendekatan pertama, Asas Borang Cascade
Pendekatan kedua, bentuk Cascade dipertingkatkan

Mari bermula,

kandungan

Borang Asas
Borang medan objek
Paparan medan dinamik
Data Contoh
Muatan Pada Halaman
Muat Negara
OnChange
Keadaan Muatan
Rehat muat (Bandar, Kampung, Jalan)
Pengesahan
Tetapkan Semula Borang

Bentuk Asas

Ini ialah halaman borang statik dengan 5 medan lungsur turun.

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() {
   . . .
}

Salin selepas log masuk

Semua sifat medan ini mempunyai faedah, akan berguna untuk mengendalikan pemaparan dinamik.

ID medanId medan
labelkan nama Diaplay medan
labelField menandakan medan label lungsur turun dalam tatasusunan senarai lungsur turun
valueField menandakan medan nilai lungsur turun
tatasusunan ibu bapa medan ibu bapa, akan digunakan untuk pengesahan
senarai juntai senarai senarai
selectedItem keseluruhan item yang dipilih objek dropdown
nilai terpilihNilai yang dipilih
onValueSelected ia adalah sifat fungsi, akan digunakan/dipanggil apabila nilai dropdown dipilih/diubah. Pada mulanya ditetapkan sebagai kaedah kosong.

Penyampaian Medan Dinamik

Dengan mengulangi kekunci objek medan borang, kami memaparkan medan lungsur turun secara dinamik, semua sifat yang diperlukan tersedia dalam objek medan borang.

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);
 };
. . .
}

Salin selepas log masuk

<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />

Salin selepas log masuk

Data Sampel

Data sampel untuk medan negara, negeri, bandar, kampung dan jalan .

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() {
  . . .
}
 . . .

Salin selepas log masuk

Muatan Pada Halaman

Pertama dalam bahagian kefungsian kita perlu menyediakan beberapa perkara penting. Ingat kami memberikan kaedah kosong kepada harta onValueSelected, kini tiba masanya untuk menetapkan kaedah sebenar. Jadi kita perlu mencipta 5 kaedah dan menetapkannya ke medan borang masing-masing.

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 (. . .);
}

Salin selepas log masuk

Apabila nilai Negara dipilih, senarai STATE perlu dimuatkan, itulah sebabnya di sini kaedah loadState diberikan kepada onValueSelected Negara. Dan begitu juga kaedah lain yang diberikan.

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

  return (. . .);

Salin selepas log masuk

Muatkan Negara

muat senarai negara daripada data sampel dan panggilnya pada pemuatan halaman awal.

  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();
  };

Salin selepas log masuk

OnChange

Apabila nilai medan jatuh turun dipilih, kita perlu menyediakan nilai medan borang masing-masing, mengalih keluar fokus dan memuatkan senarai lungsur seterusnya.

return (
  . . .
  <ZDropDown
    // . . .
    onChange={(item) => {
      fld.selectedItem = item;
      fld.selectedValue = item[fld.valueField];
      focusField = "";
      fld.onValueSelected();
    }}
  />
  . . .
);

Salin selepas log masuk

onValueSelected berguna bukan?

Keadaan Beban

Apabila dropdown(negara) pertama berubah, medan yang lain akan ditukar. Jadi perlu mengosongkan senarai dan data semua medan borang lain. Untuk ini, kami menulis kaedah yang boleh mengosongkan nilai dari medan yang diberikan ke medan akhir.

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() {
   . . .
}

Salin selepas log masuk

Kaedah ini boleh digunakan untuk semua medan lungsur turun yang lain dan tujuan penetapan semula halaman.

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);
 };
. . .
}

Salin selepas log masuk

Senarai lungsur negeri kini dimuatkan dengan sempurna.

Muatkan selebihnya (Bandar, Kampung, Jalan)

Seperti sebelum ini kami memuatkan data untuk medan yang lain.

<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />

Salin selepas log masuk

baik, semua dropdown diisi dengan senarai masing-masing.

Cascading Form React Native Advanced

Pengesahan

Sebelum menunjukkan senarai lungsur turun, kami perlu mengesahkan medan induknya. Jadi kita akan mendapatkan medan induk daripada objek medan bentuk. Kemudian ulangi satu persatu, sahkan nilainya dan tunjukkan amaran jika perlu.

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() {
  . . .
}
 . . .

Salin selepas log masuk

Cascading Form React Native Advanced

Tetapkan Semula Borang

Akhir sekali, kami menyediakan pilihan untuk menetapkan semula medan borang.

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 (. . .);
}

Salin selepas log masuk

Semua Selesai. Kini kita melihat cara menangani medan borang dinamik, medan pemaparan, memuatkan data dan mengesahkannya.

Ini ialah 3 pendekatan saya untuk mengendalikan medan borang berlatarkan.

Semoga siaran/siri ini mempunyai beberapa perkara berguna yang anda suka. terima kasih.

Kod penuh di sini

Atas ialah kandungan terperinci Cascading Form React Native Advanced. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!