React实现二级联动的方法 React实现二级联动的方法

本文实例为大家分享了React实现二级联动的具体代码，供大家参考，具体内容如下
实现效果：普通h5页，图片我进行了裁剪，把用户那部分删掉了，不过也不影响说明
【React实现二级联动的方法】大体思路就是把数据接口从页面传给组件，交互在组件内执行后，通过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}))}); }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。