기본 계단식 형식 React Native-JS 튜토리얼-php.cn

계단식 양식 필드를 처리하는 3가지 접근 방식을 공유하고 싶습니다.

첫 번째 접근 방식은 상태 변수를 사용하는 일반적인 방법입니다.
두 번째는 일반 변수와 하나의 부울 상태 변수를 사용하여 상태 효과(페이지 새로 고침)를 트리거하는 것입니다.
세 번째는 일반 변수를 사용하는 동적 양식 필드입니다.

이 게시물에서는 국가, 주, 도시 데이터를 기반으로 계단식 양식 필드를 처리하는 일반적인 일반적인 방법인 첫 번째 접근 방식을 볼 수 있습니다.

패키지

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

로그인 후 복사

우리는 드롭다운 필드에 React-native-element-dropdown을 사용하고 있습니다

기본 페이지

Basic Cascading Form React Native

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}       
        />

로그인 후 복사

Basic Cascading Form React Native

이제 반쯤 끝났습니다.

상태 상태 로드

선택한 국가에서 국가 선택에 따라 해당 주상태를 로드해야 합니다.

국가 필드를 업데이트하고, 국가 선택에 따라 상태를 로드하고, 국가에 초점을 맞춥니다.

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

로그인 후 복사

Basic Cascading Form React Native

도시 로드

선택한 항목에 따라 도시 필드를 로드합니다.

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

로그인 후 복사

Basic Cascading Form React Native

모든 설정이 완료되었으며 이제 양식 필드가 제대로 작동합니다.

Basic Cascading Form React Native

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

로그인 후 복사

Basic Cascading Form React Native