Formulaire en cascade React Native amélioré

Je souhaite partager mes 3 approches de gestion des champs de formulaire en cascade.

1. La première est une approche générale commune, utilisant des variables d'état.
2. La deuxième consiste à utiliser des variables ordinaires et une variable d'état booléenne pour déclencher l'effet d'état (page d'actualisation).
3. Le troisième est les champs de formulaire dynamiques avec des variables ordinaires.

Première approche, utilisant des variables d'état

Ici, dans cet article, nous voyons la deuxième approche, utilisant des variables ordinaires pour gérer les champs de formulaire en cascade basés sur les données du pays, de l'état et de la ville.

Forfaits

react-native-element-dropdown
react-native-paper

nous utilisons réagir-native-element-dropdown pour les champs déroulants

Page de base

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

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



<p>ZDropDown is a custom component. </p>

<h3>
  
  
  Sample data
</h3>



<pre class="brush:php;toolbar:false">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: "6",
    stateId: "2",
    countryId: "1",
    name: "city6_state2_country1",
  },
  {
    cityId: "7",
    stateId: "3",
    countryId: "1",
    name: "city7_state3_country1",
  }, 
  {
    cityId: "23",
    stateId: "8",
    countryId: "3",
    name: "city23_state8_country3",
  }, 
  {
    cityId: "30",
    stateId: "10",
    countryId: "4",
    name: "city30_state10_country4",
  }, 
  {
    cityId: "35",
    stateId: "12",
    countryId: "4",
    name: "city35_state12_country4",
  },
  {
    cityId: "36",
    stateId: "12",
    countryId: "4",
    name: "city36_state12_country4",
  },
];

Variables de formulaire

Dans la première approche, nous avons utilisé 4 variables d'état mais ici nous utilisons 4 variables ordinaires (3 pour la liste déroulante, 1 pour le champ de focus) et une variable d'état qui est utilisée pour changer et déclencher l'effet d'état (page d'actualisation).

var country = {
  list: [],
  selectedCountry: {},
  selectedValue: null,
};

var state = {
  list: [],
  selectedState: {},
  selectedValue: null,
};

var city = {
  list: [],
  selectedCity: {},
  selectedValue: null,
};

var focusField = '';

export default function App() {
 const [refreshPage, setRefreshPage] = useState(false);

  return (
    <View>



<p>Focus and Blur events get triggered more than onChange event so it is better to maintain a separate variable to represent the focus field and avoid data mess up situations. </p>

<h3>
  
  
  Load Country
</h3>

<p>Load country dropdown from the sample data. (you can use api call)<br>
</p>

<pre class="brush:php;toolbar:false">export default function App() {
. . .
  const loadCountry = () => {
    // load data from api call
    country.list = [...listCountry];
    // switching value will refresh the ui
    setRefreshPage(!refreshPage);
  };

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

return (
. . .
)

Mise au point/flou

Nous utilisons une fonction pour définir le champ de focus et actualiser la page en changeant la variable d'état (refreshPage)

  const changeFocusField = (fld = '') => {
    focusField = fld;
    setRefreshPage(!refreshPage);
  };

        <Text>Country</Text>
        <ZDropDown
          . . .
          isFocus={focusField === 'country'}
          onFocus={() => changeFocusField('country')}
          onBlur={() => changeFocusField('')}
          onChange={null}
        />
        <Text>State</Text>
        <ZDropDown
        . . .
          isFocus={focusField === 'state'}
          onFocus={() => changeFocusField('state')}
          onBlur={() => changeFocusField('')}
          onChange={null}
        />
        <Text>City</Text>
        <ZDropDown        
        . . .
          isFocus={focusField === 'city'}
          onFocus={() => changeFocusField('city')}
          onBlur={() => changeFocusField('')}
          onChange={null}       
        />

Nous sommes à mi-chemin maintenant.

Charger État ÉTAT

Sur le pays sélectionné, nous devons charger les états ÉTATS respectifs en fonction de la sélection du pays.

Mettez à jour le champ du pays, concentrez-vous hors du pays et chargez les ÉTATS en fonction du pays.

  <Text>Country</Text>
  <ZDropDown
    . . .
    onChange={(item) => {
      country.selectedCountry = item;
      country.selectedValue = item.countryId;
      focusField = '';
      loadState();
    }}
  />

Avez-vous vu la différence dès la première approche ? Auparavant, 3 variables d'état étaient mises à jour, mais ici, une seule variable d'état est mise à jour.

Lorsque le pays change, les États et les villes seront modifiés. Donc, avant de configurer la nouvelle valeur, nous devons effacer les données existantes.

 const loadState = async () => {
   state = { list: [], selectedState: {}, selectedValue: null };
   city = { list: [], selectedCity: {}, selectedValue: null };
   const arr = listSate.filter(
     (ele) => ele.countryId === country.selectedValue
   );
   if (arr.length) {
     state.list = arr;
   }
   refreshPage(!refreshPage);
 };

Charger la ville

Et chargez le champ de la ville en fonction du pays et de l'état.

    <Text>State</Text>
    <ZDropDown
      . . .
      onChange={(item) => {
        state.selectedValue = item.stateId;
        state.selectedState = item;
        changeFocusField('');
        loadCity();
      }}
     />

  const loadCity = async () => {
    city = { list: [], selectedCity: {}, selectedValue: null };
    const arr = listCity.filter((ele) => ele.stateId === state.selectedValue);
    if (arr.length) city.list = arr;
    setRefreshPage(!refreshPage);
  };

Tout est prêt, les champs du formulaire fonctionnent correctement maintenant.

2 fonctionnalités supplémentaires supplémentaires, l'une consiste à réinitialiser la page et l'autre à afficher un avertissement.

Réinitialiser la page

Les variables de formulaire et la variable de focus doivent être effacées.

. . .
  const resetForm = () => {
    country = {list: [...listCountry],selectedCountry: {}, selectedValue: null};
    state = { list: [], selectedState: {}, selectedValue: null };
    city = { list: [], selectedCity: {}, selectedValue: null };
    focusField = '';
    setRefreshPage(!refreshPage);
  };
. . .

  <TouchableOpacity onPress={() => resetForm()}>



<h3>
  
  
  Warning
</h3>

<p>We have to show a warning msg if the parent field value is null. For that we are using SnackBar component from paper.<br>
</p>

<pre class="brush:php;toolbar:false">import { Snackbar } from "react-native-paper";
. . .
var snackMsg = '';
export default function App() {
  . . .
  const [visible, setVisible] = useState(false);

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

  return (
    <View>



<p>We moved snackMsg to ordinary variable from state variable.</p>

<p>Since State and City fields have parent field, they have to be validated.<br>
</p>

<pre class="brush:php;toolbar:false">        <Text>State</Text>
        <ZDropDown          
          onFocus={() => {
            focusField('state');
            if (!country.selectedValue) {
              snackMsg = 'Select country';
              onToggleSnackBar();
              changeFocusField('country');
            }
          }}
          . . .
        />
        <Text>City</Text>
        <ZDropDown          
          onFocus={() => {
            focusField('city');
            if (!country.selectedValue) {
              snackMsg = 'Select country';
              onToggleSnackBar();
              changeFocusField('country');
            } else if (!state.selectedValue) {
              snackMsg = 'Select state';
              onToggleSnackBar();
              changeFocusField('state');
            }
          }}
          . . .
        />

Fait.

Merci.

Référence complète du code ici

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!