| 本文实例为大家分享了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> ); }}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
5种方法告诉你如何使JavaScript 代码库更干净
js实现简易的英汉词典 |
