??? ?? ??? ???? 3?? ?? ??? ???? ????.
- ? ?? ?? ??? ?? ??? ???? ???? ?????.
- ? ??? ?? ??? ??? ?? ?? ??? ???? ?? ??(??? ?? ??)? ????? ????.
- ? ??? ?? ??? ???? ?? ?? ?????.
? ?????? ??, ?, ?? ???? ???? ??? ?? ??? ???? ???? ???? ??? ? ?? ?? ??? ? ? ????.
???
react-native-element-dropdown react-native-paper
??? ???? ??? React-native-element-dropdown? ???? ????
?? ???
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", }, ];
?? ??
4?? ?? ??? ?????. 3?? ?? ??? ???? ??? 1?? ??? ??? ?????.
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 ( . . . )
?? / ??
???? ??? ???? ?? ??? ??? ???? ??? ??? ??? ????? ???. ?? ???? ?? ??? ???? ????.
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} />
?? ?? ?????.
?? ?? ??
??? ???? ?? ??? ?? ?? ???? ???? ???.
?? ??? ??????, ?? ??? ?? ??? ????, ??? ??? ????.
<Text>Country</Text> <ZDropDown . . . onChange={(item) => { setCountry({ ...country, selectedCountry: item, value: item.countryId, }); loadState(item.countryId); focusField(""); }} />
??? ???? ?? ??? ?? ?????. ??? ? ?? ???? ?? ?? ???? ??? ???.
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); };
?? ??
??? ??? ?? ?? ??? ?????.
<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] }); };
?? ??? ?????? ?? ?? ??? ??? ?????.
2?? ?? ??? ? ???? ????. ??? ???? ?? ?? ?? ??? ??? ???? ??? ???? ????.
??? ???
? ??? ??? ??? ??? ???.
. . . 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'); } }} . . . />
?????! ?? ?????. ?????.
???? ?? ?? ??
? ??? ?? ??? ?? React Native? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!

? AI ??

Undress AI Tool
??? ???? ??

Undresser.AI Undress
???? ?? ??? ??? ?? AI ?? ?

AI Clothes Remover
???? ?? ???? ??? AI ?????.

Clothoff.io
AI ? ???

Video Face Swap
??? ??? AI ?? ?? ??? ???? ?? ???? ??? ?? ????!

?? ??

??? ??

???++7.3.1
???? ?? ?? ?? ???

SublimeText3 ??? ??
??? ??, ???? ?? ????.

???? 13.0.1 ???
??? PHP ?? ?? ??

???? CS6
??? ? ?? ??

SublimeText3 Mac ??
? ??? ?? ?? ?????(SublimeText3)

Node.js?? HTTP ??? ???? ? ?? ???? ??? ????. 1. ?? ????? ????? ??? ??? ? ?? ????? ?? ?? ? https.get () ??? ?? ??? ??? ? ?? ????? ?? ??? ?????. 2.axios? ??? ???? ? ?? ??????. ??? ??? ??? ??? ??? ??? ???/???, ?? JSON ??, ???? ?? ?????. ??? ?? ??? ????? ?? ????. 3. ?? ??? ??? ??? ??? ???? ???? ??? ??? ???? ?????.

JavaScript ??? ??? ?? ?? ? ?? ???? ????. ?? ???? ???, ??, ??, ?, ???? ?? ? ??? ?????. ?? ????? ?? ?? ? ? ??? ????? ?? ??? ??? ????. ??, ?? ? ??? ?? ?? ??? ??? ??? ???? ??? ??? ???? ??? ?? ??? ????. ?? ? ????? ??? ???? ? ??? ? ??? TypeofNull? ??? ?????? ??? ? ????. ? ? ?? ??? ???? ?????? ????? ???? ??? ???? ? ??? ? ? ????.

?????, JavaScript ???! ?? ? JavaScript ??? ?? ?? ?????! ?? ?? ??? ??? ??? ? ????. Deno?? Oracle? ?? ??, ??? JavaScript ?? ??? ????, Google Chrome ???? ? ??? ??? ???? ?????. ?????! Deno Oracle? "JavaScript"??? ????? Oracle? ?? ??? ??? ??????. Node.js? Deno? ??? ? Ryan Dahl? ??? ?????? ???? ????? JavaScript? ??? ???? Oracle? ????? ???? ?????.

Cacheapi? ?????? ?? ???? ??? ???? ???, ?? ??? ??? ?? ???? ? ??? ?? ? ???? ??? ??????. 1. ???? ????, ??? ??, ?? ?? ?? ???? ???? ??? ? ????. 2. ??? ?? ?? ??? ?? ? ? ????. 3. ?? ?? ?? ?? ?? ??? ??? ?? ?????. 4. ??? ???? ?? ?? ???? ?? ?? ?? ?? ?? ???? ?? ?? ??? ??? ? ????. 5. ?? ???? ??, ??? ??? ? ??? ??, ?? ??? ? ?? ???? ???? ???? ? ?? ?????. 6.?? ??? ?? ?? ?? ??, ???? ?? ? HTTP ?? ????? ?????? ???????.

??? JavaScript?? ??? ??? ?????? ?? ???????. ?? ??, ?? ?? ? ??? ??? ?? ????? ????? ?????. 1. ?? ??? ??? ????? ???? ??. ()? ?? ??? ??? ?????. ?. ()? ?? ??? ?? ??? ??? ?? ? ? ????. 2. ?? ??? .catch ()? ???? ?? ??? ??? ?? ??? ??????, ??? ???? ???? ????? ??? ? ????. 3. Promise.all ()? ?? ????? (?? ?? ?? ? ??????? ??), Promise.Race () (? ?? ??? ?? ?) ? Promise.AllSettled () (?? ??? ???? ??)

.map (), .filter () ? .reduce ()? ?? JavaScript ?? ?? ???? ??? ??? ??? ? ? ????. 1) .map ()? ??? ??? ??? ???? ? ??? ???? ? ?????. 2) .filter ()? ???? ??? ????? ? ?????. 3) .reduce ()? ???? ?? ??? ???? ? ?????. ???? ??? ????? ??? ?? ?? ??? ?????.

JavaScript? ??? ??? ?? ??, ? ? ? ?? ???? ???? ??? ??? ?????. 1. ?? ??? ?? ??? ???? ??? ??? ??? ??? ?? WebAPI? ?????. 2. WebAPI? ??????? ??? ?? ? ? ??? ?? ??? (??? ?? ?? ???? ??)? ????. 3. ??? ??? ?? ??? ?? ??? ?????. ?? ??? ??? ????? ??? ??? ?? ? ???? ?????. 4. ???? ?? (? : Promise. 5. ??? ??? ???? ?? ???? ???? ?? ?? ?? ??? ????? ? ??????.

??? ??? ?? ???? ?? ??? ???? ?? ??? ??? ?? ??? ?? ??? ?????. 1. ??? ?? : ?? ??? ?? ? ? ???? ?? ??? ???? ??? ???? ??????. ?? ??, ??? ?? ? ? ?? ??? ?? ? ?? ??? ??????. 2. ??? ?? : ??? ???? ?? ?? ??? ?? ???? ????? ? ?? ?????? ???? ????? ? ?? ?? ??? true? ??????. 3. ?? ???? ?? ?? ??? ?? ??, ?? ??? ? ?? ???? ?????. 4. DOM ??? ???? ??, ?? ? ??? ? ??? ??? ?? ???? ?? ???? ?????.
