Grundlegende kaskadierende Form React Native
Ich möchte meine drei Ansätze zum Umgang mit kaskadierenden Formularfeldern teilen.
- Der erste Ansatz ist allgemein und verwendet Zustandsvariablen.
- Zweitens besteht darin, gewöhnliche Variablen und eine boolesche Zustandsvariable zu verwenden, um den Zustandseffekt auszulösen (Seite aktualisieren).
- Drittens gibt es dynamische Formularfelder mit gewöhnlichen Variablen.
Hier in diesem Beitrag sehen wir den ersten Ansatz, die übliche gängige Methode zum Umgang mit kaskadierenden Formularfeldern basierend auf Länder-, Bundesland- und Stadtdaten.
Pakete
react-native-element-dropdown react-native-paper
Wir verwenden React-Native-Element-Dropdown für Dropdown-Felder
Basisseite
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", }, ];
Formularvariablen
Wir verwenden 4 Zustandsvariablen, 3 für die Formularfelder und die verbleibende, um den Fokuseffekt auszulösen.
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 / Unschärfe
Wenn ein Dropdown-Menü ausgewählt wird, muss dieses Feld fokussiert werden und die übrigen Felder sollten unscharf sein. Wir verwenden eine Funktion, um dies zu handhaben.
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} />
Wir sind jetzt zur Hälfte fertig.
Laden Sie State STATE
Bei der Auswahl des Landes müssen wir die entsprechenden Staaten STAATEN basierend auf der Länderauswahl laden.
Aktualisieren Sie das Länderfeld, laden Sie STAATEN basierend auf der Länderauswahl und konzentrieren Sie sich auf das Land.
<Text>Country</Text> <ZDropDown . . . onChange={(item) => { setCountry({ ...country, selectedCountry: item, value: item.countryId, }); loadState(item.countryId); focusField(""); }} />
Wenn sich das Land ändert, werden sowohl Bundesstaaten als auch Städte geändert. Bevor wir den neuen Wert einrichten, müssen wir also die vorhandenen Daten löschen.
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); };
Stadt laden
Und laden Sie das Stadtfeld basierend auf der Auswahl.
<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] }); };
Fertig, die Formularfelder funktionieren jetzt ordnungsgemäß.
Wenn wir zwei weitere zusätzliche Funktionen berücksichtigen, sind wir fertig. Eine davon besteht darin, die Seite neu zu formatieren, und die andere darin, das Formular zu validieren und eine Warnung anzuzeigen.
Seite zurücksetzen
Formularvariablen und Fokusvariablen sollten gelöscht werden.
. . . 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'); } }} . . . />
Ja, das ist es! Wir sind fertig. Danke schön.
Vollständige Codereferenz hier
Das obige ist der detaillierte Inhalt vonGrundlegende kaskadierende Form React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Häufig gestellte Fragen und Lösungen für das Ticket-Ticket-Ticket-Ticket in Front-End im Front-End-Entwicklungsdruck ist der Ticketdruck eine häufige Voraussetzung. Viele Entwickler implementieren jedoch ...

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Es gibt kein absolutes Gehalt für Python- und JavaScript -Entwickler, je nach Fähigkeiten und Branchenbedürfnissen. 1. Python kann mehr in Datenwissenschaft und maschinellem Lernen bezahlt werden. 2. JavaScript hat eine große Nachfrage in der Entwicklung von Front-End- und Full-Stack-Entwicklung, und sein Gehalt ist auch beträchtlich. 3. Einflussfaktoren umfassen Erfahrung, geografische Standort, Unternehmensgröße und spezifische Fähigkeiten.

Diskussion über die Realisierung von Parallaxe -Scrolling- und Elementanimationseffekten in diesem Artikel wird untersuchen, wie die offizielle Website der Shiseeido -Website (https://www.shiseeido.co.jp/sb/wonderland/) ähnlich ist ...

JavaScript zu lernen ist nicht schwierig, aber es ist schwierig. 1) Verstehen Sie grundlegende Konzepte wie Variablen, Datentypen, Funktionen usw. 2) Beherrschen Sie die asynchrone Programmierung und implementieren Sie sie durch Ereignisschleifen. 3) Verwenden Sie DOM -Operationen und versprechen Sie, asynchrone Anfragen zu bearbeiten. 4) Vermeiden Sie häufige Fehler und verwenden Sie Debugging -Techniken. 5) Die Leistung optimieren und Best Practices befolgen.

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

Wie fusioniere ich Array -Elemente mit derselben ID in ein Objekt in JavaScript? Bei der Verarbeitung von Daten begegnen wir häufig die Notwendigkeit, dieselbe ID zu haben ...

Datenaktualisierungsprobleme in Zustand Asynchronen Operationen. Bei Verwendung der Zustand State Management Library stoßen Sie häufig auf das Problem der Datenaktualisierungen, die dazu führen, dass asynchrone Operationen unzeitgemäß sind. � ...
