Borang Lata Asas React Native

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

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

Di sini dalam siaran ini kita melihat pendekatan pertama, cara biasa mengendalikan medan borang berlatarkan berdasarkan data negara, negeri, bandar.

Pakej

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

kami menggunakan react-native-element-dropdown untuk medan drop down

Halaman Asas

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",
  },
];

Pembolehubah Bentuk

Kami menggunakan 4 pembolehubah keadaan, 3 untuk medan borang dan selebihnya untuk mencetuskan kesan fokus.

export default function App() {
  const [country, setCountry] = useState({
    data: [],
    selectedCountry: {},
    value: null,
  });
  const [state, setState] = useState({
    data: [],
    selectedState: {},
    value: null,
  });
  const [city, setCity] = useState({ data: [], selectedCity: {}, value: null });

  const [ddfocus, setDdfocus] = useState({
    country: false,
    state: false,
    city: false,
  });

  return (
    <View>



<p>Focus and Blur events get triggered more than the onChange event so for focus changes, here a separate state variable is used to not to mess up with drop down data changes. </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
    setCountry({ data: [...listCountry], selectedCountry: {}, value: null });
  };

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

return (
. . .
)

Fokus / Kabur

Apabila satu lungsur turun dipilih, medan itu perlu difokuskan dan medan yang selebihnya harus dikaburkan. Kami menggunakan fungsi untuk mengendalikan perkara ini.

  const focusField = (fld = '') => {
    const obj = { country: false, state: false, city: false };
    if (fld) obj[fld] = true;
    setDdfocus(obj);
  };

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

Kami sudah separuh jalan sekarang.

Muatkan Negeri NEGERI

Pada negara yang dipilih, kami perlu memuatkan negeri NEGERI masing-masing berdasarkan pilihan negara.

Kemas kini medan negara, muatkan NEGERI berdasarkan pemilihan negara dan fokus di luar negara.

  <Text>Country</Text>
  <ZDropDown
    . . .
    onChange={(item) => {
      setCountry({
        ...country,
        selectedCountry: item,
        value: item.countryId,
      });
      loadState(item.countryId);
      focusField("");
    }}
  />

Apabila negara ditukar, kedua-dua negeri dan bandar akan ditukar. Jadi sebelum menetapkan nilai baharu kita perlu mengosongkan data sedia ada.

const loadState = async (cntId) => {
  // load data from api call
  setState({ data: [], selectedState: {}, value: null });
  setCity({ data: [], selectedCity: {}, value: null });
  const arr = listSate.filter((ele) => ele.countryId === cntId);
  setState({ ...state, data: [...arr] });
  console.log("respective states ", arr);
};

Bandar Muatan

Dan muatkan medan bandar berdasarkan pemilihan.

    <Text>State</Text>
    <ZDropDown
      . . .
      onChange={(item) => {
        setState({ ...state, selectedState: item, value: item.stateId });
        loadCity(item.stateId);
        focusField("");
      }}
     />

const loadCity = async (stId) => {
  // load data from api call
  setCity({ data: [], selectedCity: {}, value: null });
  const arr = listCity.filter((ele) => ele.stateId === stId);
  setCity({ ...city, data: [...arr] });
};

Selesai, medan borang berfungsi dengan baik sekarang.

Jika kami mengendalikan 2 lagi ciri tambahan, kami sudah selesai. Satu sedang merehatkan halaman dan satu lagi adalah untuk mengesahkan borang dan menunjukkan amaran.

Tetapkan semula halaman

Pembolehubah bentuk dan pembolehubah fokus hendaklah dikosongkan.

. . .
const resetForm = () => {
  focusField("");
  setCountry({ data: [...listCountry], selectedCountry: {}, value: null });
  setState({ data: [], selectedState: {}, value: null });
  setCity({ data: [], selectedCity: {}, value: null });
};
. . .

  <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";

export default function App() {
  . . .
  const [visible, setVisible] = useState(false);
  const [snackMsg, setSnackMsg] = useState("");

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

  return (
    <View>



<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.value) {
              setSnackMsg('Select country');
              onToggleSnackBar();
              focusField('country');
            }
          }}
          . . .
        />
        <Text>City</Text>
        <ZDropDown          
          onFocus={() => {
            focusField('city');
            if (!country.value) {
              setSnackMsg('Select country');
              onToggleSnackBar();
              focusField('country');
            } else if (!state.value) {
              setSnackMsg('Select state');
              onToggleSnackBar();
              focusField('state');
            }
          }}
          . . .
        />

Ya itu sahaja! Kami sudah selesai. terima kasih.

Rujukan kod penuh di sini

Atas ialah kandungan terperinci Borang Lata Asas React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!