React怎么样实现二级联动

这篇文章给大家分享的是有关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怎么样实现二级联动"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！