찾다

집 >웹 프론트엔드 >JS 튜토리얼 >계단식 양식 React Native Advanced

계단식 양식 React Native Advanced

DDD
DDD원래의
2024-12-08 13:00:181002검색

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

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

이것은 세 번째 접근 방식이며 동적 양식 필드를 다룰 것입니다.

참고로 이전 2가지 접근 방식을 살펴보면 이 게시물을 더 쉽게 이해할 수 있습니다.

첫 번째 접근 방식, Cascade Form Basic
두 번째 접근방식, Cascade 형태 개선

시작해 보겠습니다.

내용물

  • 기본형
  • 양식 필드 개체
  • 동적 필드 렌더링
  • 샘플 데이터
  • 페이지 로드
  • 국가 로드
  • 변경 시
  • 로드 상태
  • 로드레스트(시, 마을, 거리)
  • 검증
  • 양식 재설정

기본 형태

5개의 드롭다운 필드가 있는 정적 양식 페이지입니다.

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

var snackMsg = "";
export default function App() {
  const [refreshPage, setRefreshPage] = useState(false);
  const [visible, setVisible] = useState(false);

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

  const resetForm = () => {
  };

  return (
    <ScrollView>



<p>refreshPage state variable is used to refresh the page in all the situations. </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173363402014343.jpg" alt="Cascading Form React Native Advanced" /></p>

<p>Now, These fields are going to be converted as dynamic. </p>

<h3>
  
  
  Form Field Object
</h3>

<p>Previously we had 3 separate objects for 3 different fields, but here all fields data placed under one form field object.<br>
</p>

<pre class="brush:php;toolbar:false"> . . .
const formFields = {
  country: {
    fieldId: "country",
    label: "Country",
    labelField: "name",
    valueField: "countryId",
    parents: [],
    list: [],
    selectedItem: {},
    selectedValue: null,
    onValueSelected: () => null,
  },
  state: {
    fieldId: "state",label: "State",labelField: "name",valueField: "stateId",
    parents: ["country"],list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  city: {
    fieldId: "city",label: "City",labelField: "name",valueField: "cityId",
    parents: ["country", "state"],list: [],selectedItem: {},
    selectedValue: null,onValueSelected: () => null,
  },
  village: {
    fieldId: "village",label: "Village",labelField: "name",
    valueField: "villageId",
    parents: ["country", "state", "city"],
    list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  street: {
    fieldId: "street",label: "Street",labelField: "name",
    valueField: "streetId",
    parents: ["country", "state", "city", "village"],
    list: [],selectedItem: {},selectedValue: null,onValueSelected: () => null,
  },
};

 . . .
export default function App() {
   . . .
}

필드의 이러한 모든 속성에는 이점이 있으며 동적 렌더링을 처리하는 데 유용합니다.

  • fieldId 필드의 ID
  • label 필드 이름 표시
  • labelField는 드롭다운 목록 배열의 드롭다운 레이블 필드를 나타냅니다
  • valueField는 드롭다운 값 필드를 나타냅니다
  • 부모 필드의 부모 배열은 유효성 검사에 사용됩니다
  • 목록 드롭다운 목록 배열
  • selectedItem 드롭다운의 전체 선택 항목 개체
  • selectedValue 선택된 값
  • onValueSelected는 함수 속성이며 드롭다운 값을 선택/변경할 때 사용/호출됩니다. 처음에는 빈 메서드로 할당되었습니다.

동적 필드 렌더링

드롭다운 필드를 동적으로 렌더링하는 양식 필드 개체 ​​키를 반복하면 양식 필드 개체에서 필요한 모든 속성을 사용할 수 있습니다.

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



<p>handle focus / blur<br>
</p>

<pre class="brush:php;toolbar:false">var focusField = "";
export default function App() {
. . .

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

<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />

샘플 데이터

국가, 주, 시, 마을, 거리 필드에 대한 샘플 데이터입니다.

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: "5", stateId: "2", countryId: "1", name: "city5_state2_country1" },
  {
    cityId: "21",stateId: "7",countryId: "3",name:"city21_state7_country3",
  },
  {
    cityId: "26",stateId: "9",countryId: "3",name: "city26_state9_country3",
  },
];

const listVillage = [
  { cityId: "1", villageId: "1", name: "village 1  city 1" },
  { cityId: "2", villageId: "5", name: "village 5  city 2" },
  { cityId: "3", villageId: "9", name: "village 9  city 3" },
  { cityId: "4", villageId: "10", name: "village 10  city 4" },
];

const listStreet = [
  { villageId: "1", streetId: "1", name: "village 1 street 1" },
  { villageId: "1", streetId: "109", name: "village 1 street 109" },
  { villageId: "2", streetId: "2", name: "village 2 street 2" },
  { villageId: "2", streetId: "110", name: "village 2 street 110" },
];
 . . .
export default function App() {
  . . .
}
 . . .

페이지 로드

먼저 기능 측면에서 몇 가지 중요한 사항을 설정해야 합니다. onValueSelected 속성에 빈 메서드를 할당했음을 기억하세요. 이제 실제 메서드를 할당할 차례입니다. 따라서 5개의 메소드를 생성하고 해당 양식 필드에 할당해야 합니다.

export default function App() {
  . . .
  const allValuesSelected = () => {
    console.log("All fields value selected");
  };

  const loadStreet = async () => {};

  const loadVillage = async () => {};

  const loadCity = async () => {};

  const loadState = async () => {};

  const loadCountry = async () => {};

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;    
  };

  return (. . .);
}

국가 값을 선택하면 STATE 목록을 로드해야 하기 때문에 여기서는 국가의 onValueSelected에 loadState 메소드가 할당됩니다. 그리고 다른 방법도 마찬가지로 할당됩니다.

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

  return (. . .);

국가 로드

샘플 데이터에서 국가 목록을 로드하고 초기 페이지 로드 시 호출합니다.

  const loadCountry = async () => {
    formFields.country.list = [...listCountry];
    setRefreshPage(!refreshPage);
  };

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;

    loadCountry();
  };

변경 시

드롭다운 필드 값이 선택되면 해당 양식 필드 값을 설정하고 포커스를 제거한 후 다음 드롭다운 목록을 로드해야 합니다.

return (
  . . .
  <ZDropDown
    // . . .
    onChange={(item) => {
      fld.selectedItem = item;
      fld.selectedValue = item[fld.valueField];
      focusField = "";
      fld.onValueSelected();
    }}
  />
  . . .
);

onValueSelected가 유용하죠?

로드 상태

첫 번째 드롭다운(국가)이 변경되면 나머지 필드도 변경됩니다. 따라서 다른 모든 양식 필드의 목록과 데이터를 지워야 합니다. 이를 위해 주어진 필드부터 끝 필드까지 값을 지울 수 있는 메소드를 작성합니다.

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

var snackMsg = "";
export default function App() {
  const [refreshPage, setRefreshPage] = useState(false);
  const [visible, setVisible] = useState(false);

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

  const resetForm = () => {
  };

  return (
    <ScrollView>



<p>refreshPage state variable is used to refresh the page in all the situations. </p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173363402014343.jpg" alt="Cascading Form React Native Advanced" /></p>

<p>Now, These fields are going to be converted as dynamic. </p>

<h3>
  
  
  Form Field Object
</h3>

<p>Previously we had 3 separate objects for 3 different fields, but here all fields data placed under one form field object.<br>
</p>

<pre class="brush:php;toolbar:false"> . . .
const formFields = {
  country: {
    fieldId: "country",
    label: "Country",
    labelField: "name",
    valueField: "countryId",
    parents: [],
    list: [],
    selectedItem: {},
    selectedValue: null,
    onValueSelected: () => null,
  },
  state: {
    fieldId: "state",label: "State",labelField: "name",valueField: "stateId",
    parents: ["country"],list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  city: {
    fieldId: "city",label: "City",labelField: "name",valueField: "cityId",
    parents: ["country", "state"],list: [],selectedItem: {},
    selectedValue: null,onValueSelected: () => null,
  },
  village: {
    fieldId: "village",label: "Village",labelField: "name",
    valueField: "villageId",
    parents: ["country", "state", "city"],
    list: [],selectedItem: {},selectedValue: null,
    onValueSelected: () => null,
  },
  street: {
    fieldId: "street",label: "Street",labelField: "name",
    valueField: "streetId",
    parents: ["country", "state", "city", "village"],
    list: [],selectedItem: {},selectedValue: null,onValueSelected: () => null,
  },
};

 . . .
export default function App() {
   . . .
}

이 방법은 다른 모든 드롭다운 필드 및 페이지 재설정 목적으로 사용할 수 있습니다.

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



<p>handle focus / blur<br>
</p>

<pre class="brush:php;toolbar:false">var focusField = "";
export default function App() {
. . .

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

이제 상태 드롭다운 목록이 완벽하게 로드되었습니다.

나머지(도시, 마을, 거리)를 로드합니다.

나머지 필드에 대한 데이터를 로드하기 전과 같습니다.

<ZDropDown
. . .
  isFocus={focusField === ele}
  onFocus={() => {
    changeFocusField(ele);
  }}
  onBlur={() => changeFocusField("")}
  onChange={(item) => {}}
 />

좋습니다. 모든 드롭다운이 해당 목록으로 채워져 있습니다.

Cascading Form React Native Advanced

확인

드롭다운 목록을 표시하기 전에 상위 필드의 유효성을 검사해야 합니다. 따라서 양식 필드 개체에서 상위 필드를 가져오겠습니다. 그런 다음 하나씩 반복하여 값을 검증하고 필요한 경우 경고를 표시합니다.

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: "5", stateId: "2", countryId: "1", name: "city5_state2_country1" },
  {
    cityId: "21",stateId: "7",countryId: "3",name:"city21_state7_country3",
  },
  {
    cityId: "26",stateId: "9",countryId: "3",name: "city26_state9_country3",
  },
];

const listVillage = [
  { cityId: "1", villageId: "1", name: "village 1  city 1" },
  { cityId: "2", villageId: "5", name: "village 5  city 2" },
  { cityId: "3", villageId: "9", name: "village 9  city 3" },
  { cityId: "4", villageId: "10", name: "village 10  city 4" },
];

const listStreet = [
  { villageId: "1", streetId: "1", name: "village 1 street 1" },
  { villageId: "1", streetId: "109", name: "village 1 street 109" },
  { villageId: "2", streetId: "2", name: "village 2 street 2" },
  { villageId: "2", streetId: "110", name: "village 2 street 110" },
];
 . . .
export default function App() {
  . . .
}
 . . .

Cascading Form React Native Advanced

양식 재설정

마지막으로 양식 필드를 재설정할 수 있는 옵션이 제공됩니다.

export default function App() {
  . . .
  const allValuesSelected = () => {
    console.log("All fields value selected");
  };

  const loadStreet = async () => {};

  const loadVillage = async () => {};

  const loadCity = async () => {};

  const loadState = async () => {};

  const loadCountry = async () => {};

  const loadPageData = () => {
    formFields.country.onValueSelected = loadState;
    formFields.state.onValueSelected = loadCity;
    formFields.city.onValueSelected = loadVillage;
    formFields.village.onValueSelected = loadStreet;
    formFields.street.onValueSelected = allValuesSelected;    
  };

  return (. . .);
}

모두 완료되었습니다. 이제 동적 양식 필드를 처리하고, 필드를 렌더링하고, 데이터를 로드하고 유효성을 검사하는 방법을 살펴보았습니다.

다음은 계단식 양식 필드를 처리하기 위한 3가지 접근 방식입니다.

이 게시물/시리즈에 귀하가 좋아하는 유용한 내용이 있기를 바랍니다. 감사합니다.

전체 코드는 여기에

위 내용은 계단식 양식 React Native Advanced의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Static Boolean Array Object if for Validating using finally Property function this react native Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：구문 오류를 방지하기 위해 JavaScript 정규식에서 백슬래시를 올바르게 사용하는 방법은 무엇입니까?다음 기사：구문 오류를 방지하기 위해 JavaScript 정규식에서 백슬래시를 올바르게 사용하는 방법은 무엇입니까?

관련 기사

더보기