React实现二级联动的方法
更新时间:2021年9月10日 12:01 点击:1484
本文实例为大家分享了React实现二级联动的具体代码,供大家参考,具体内容如下
实现效果: 普通h5页,图片我进行了裁剪,把用户那部分删掉了,不过也不影响说明
大体思路就是把数据接口从页面传给组件,交互在组件内执行后,通过onTimeChange将选择的数据结果返回给页面,然后展示到页面上。
我用Taro写的,语法和react一样。
小程序效果
好久以前的一个方法,给大家发下实现代码:
1、页面里有一个选择时间的弹框模块
{this.state.isToggleOn && ( <Panel onTimeChange={this.onTimeChange} onClick={this.closeMask} list={this.state.timeList} //接口数据 status={this.state.status} //当前商品状态,可以不加 /> )}
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 ( <View className="panel-modal"> <SendTime list={this.props.list} onClick={this.onClick} onTimeChange={this.onTimeChange} status={this.props.status} /> </View> ); } }
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 ( <View> <View className="send-time-title" onClick={this.onClick}> <Text>送达时间</Text> <View className="close" /> </View> <View className="send-time-cont"> <View className="send-date-list"> {this.props.list.map((info, index) => ( <View key={index} className={ index === this.state.dateNum ? "send-data-li current" : "send-data-li" } onClick={this.switchDay.bind(this, index, info)} > <Text className="txt">{info ? info.date : ""}</Text> </View> ))} </View> <View className="send-r-time"> {this.state.timeList.map((info, index) => ( <View key={index} className={ index === this.state.timeNum ? "send-r-li current" : "send-r-li" } onClick={this.switchTime.bind(this, index)} > <View class="send-r-flex"> <Text class="txt">{info}</Text> <Image className="blue-ok" src={imageList.blueOk} mode={"aspectFit"} lazy-load={true} /> </View> </View> ))} </View> </View> </View> ); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容也随着改...2015-10-30
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 这个是简单也是最基本的下拉框联动的示例,这个示例主要针对那些只有二级联动,且第一级是固定的选项,第二级的内容也比较简单,不刷新的联动,感兴趣的小伙伴们可以参考一下...2016-04-19
- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14