React实现二级联动的方法
程序员文章站
2022-04-11 10:33:50
本文实例为大家分享了react实现二级联动的具体代码,供大家参考,具体内容如下实现效果: 普通h5页,图片我进行了裁剪,把用户那部分删掉了,不过也不影响说明大体思路就是把数据接口从页面传给组件,交互在...
本文实例为大家分享了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> ); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 推荐几个好用的WordPress媒体库分类/文件夹管理插件
下一篇: 还好我没有上当