这篇文章给大家分享的是有关react怎么样实现二级联动的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
具体内容如下
实现效果： 普通h6页，图片我进行了裁剪，把用户那部分删掉了，不过也不影响说明
大体思路就是把数据接口从页面传给组件，交互在组件内执行后，通过ontimechange将选择的数据结果返回给页面，然后展示到页面上。
我用taro写的，语法和react一样。
小程序效果
好久以前的一个方法，给大家发下实现代码：
1、页面里有一个选择时间的弹框模块
{this.state.istoggleon && (
)}
2、弹框里
import { component } from "@tarojs/taro";
import { view, text } from "@tarojs/components";
import sendtime from "../time";
import "./index.scss";
export default class panel extends component {
constructor(props) {
super(props);
}
static defaultprops = {
list: [],
status: ""
};
onclick() {
this.props.onclick();
}
ontimechange(date, time) {
this.props.ontimechange(date, time);
}
render() {
return (
);
}
}
3、time组件里
import { component } from "@tarojs/taro";
import { view, text } from "@tarojs/components";
import { imagelist } from "../../image";
import "./index.scss";
let datenum = 0,
timenum = 0;
export default class sendtime extends component {
constructor(props) {
super(props);
this.state = {
datenum: datenum,
timenum: timenum,
timelist: [],
};
}
static defaultprops = {
list: [],
};
onclick() {
this.props.onclick();
}
switchday(index, info) {
this.setstate({
datenum: index,
});
datenum = index;
this.switchtime(timenum);
let date = info ? info.date : "";
let time = info && info.timesegementlist ? info.timesegementlist[0] : "";
this.setstate({
timelist: info.timesegementlist,
});
this.ontimechange(date, time);
}
switchtime(index) {
let datenum = this.state.datenum;
this.setstate({
timenum: index,
});
timenum = index;
let date = this.props.list[datenum] ? this.props.list[datenum].date : "";
let time = this.props.list[datenum]
? this.props.list[datenum].timesegementlist[index]
: "";
if (index != 0) {
this.ontimechange(date, time);
}
}
ontimechange(date, time) {
this.props.ontimechange(date, time);
}
componentwillmount() {
this.setstate({
timelist: ["成团后立即发货"],
});
}
componentdidmount() {
if (this.props.status) {
this.switchday(datenum, this.props.list[datenum]);
} else {
(datenum = 0), (timenum = 0);
this.setstate(
{
datanum: 0,
timenum: 0,
},
() => {
this.switchday(0, this.props.list[0]);
}
);
}
}
getclassname(index) {
switch (index) {
case this.state.datenum:
return "send-data-li current";
default:
return "send-data-li";
}
}
render() {
return (
送达时间
{this.props.list.map((info, index) => (
{info ? info.date : ""}
))}
{this.state.timelist.map((info, index) => (
{info}
))}
);
}
}
感谢各位的阅读！关于“react怎么样实现二级联动”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
