我想分享我处理级联表单字段的 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 个用于表单字段，其余一个用于触发焦点效果。
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}
/>
我们现在已经完成了一半。
在选择的国家/地区，我们需要根据所选国家/地区加载相应的州 STATES。
更新国家/地区字段，根据国家/地区选择加载州并关注国家/地区。
<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中文网其他相关文章！
