我想分享我处理级联表单字段的 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 style={styles.container}>
<view>
<text>country</text>
<zdropdown
data={[]}
labelfield=""
valuefield=""
value={null}
isfocus={false}
onchange={null}
/>
<text>state</text>
<zdropdown
data={[]}
labelfield=""
valuefield=""
value={null}
isfocus={false}
onchange={null}
/>
<text>city</text>
<zdropdown
data={[]}
labelfield=""
valuefield=""
value={null}
isfocus={false}
onchange={null}
/>
</view>
<view>
<text>selected country</text>
<text style={styles.selectedvalue}>{country.selectedcountry.name}</text>
<text>selected state</text>
<text style={styles.selectedvalue}>{state.selectedstate.name}</text>
<text>selected city</text>
<text style={styles.selectedvalue}>{city.selectedcity.name}</text>
</view>
<touchableopacity onpress={null} style={styles.clrbtn}>
<text style={styles.clrbtntxt}>reset</text>
</touchableopacity>
</view>
);
}
const zdropdown = ({
data,
labelfield,
valuefield,
value,
onfocus,
onblur,
onchange,
isfocus,
}) => {
return (
<dropdown
mode={"auto"}
style={[styles.dropdown, isfocus ? { bordercolor: "dodgerblue" } : {}]}
placeholderstyle={styles.placeholderstyle}
selectedtextstyle={styles.selectedtextstyle}
inputsearchstyle={styles.inputsearchstyle}
iconstyle={styles.iconstyle}
search={data.length > 5}
maxheight={300}
searchplaceholder="search..."
data={data}
labelfield={labelfield}
valuefield={valuefield}
placeholder={!isfocus ? "select item" : "..."}
value={value}
onfocus={onfocus}
onblur={onblur}
onchange={onchange}
/>
);
};
const styles = stylesheet.create({
// style props
});
zdropdown 是一个自定义组件。
样本数据
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 style={styles.container}>
<view>
<text>country</text>
<zdropdown
data={country.data}
labelfield="name"
valuefield="countryid"
value={country.value}
isfocus={ddfocus.country}
onchange={null}
/>
<text>state</text>
<zdropdown
data={state.data}
labelfield="name"
valuefield="stateid"
value={state.value}
isfocus={ddfocus.state}
onchange={null}
/>
<text>city</text>
<zdropdown
data={city.data}
labelfield="name"
valuefield="cityid"
value={city.value}
isfocus={ddfocus.city}
onchange={null}
/>
</view>
. . .
</view>
);
}
焦点和模糊事件比 onchange 事件更容易被触发，因此对于焦点更改，这里使用一个单独的状态变量，以免弄乱下拉数据更改。
负载国家
从示例数据中加载国家/地区下拉列表。 （可以使用api调用）
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("");
}}
/>
当国家/地区发生变化时，州和城市都会发生变化。因此，在设置新值之前，我们需要清除现有数据。
AI舌诊面诊问诊医疗系统+诊疗商城系统源码
下载
AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。
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()} style={styles.clrbtn}>
<text style={styles.clrbtntxt}>reset</text>
</touchableopacity>
. . .
警告
如果父字段值为空，我们必须显示警告消息。为此，我们使用 paper 中的 snackbar 组件。
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 style={styles.container}>
. . .
<snackbar duration={2000} visible={visible} ondismiss={ondismisssnackbar}>
{snackmsg}
</snackbar>
</view>
);
}
由于 state 和 city 字段有父字段，因此必须验证它们。
<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');
}
}}
. . .
/>
是的，就是这样！我们完成了。谢谢。
完整代码参考这里
