纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

暴走的奶糖   2021-09-10 我要评论
想了解React实现二级联动的方法的相关内容吗,暴走的奶糖在本文为您仔细讲解React二级联动的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>
    );
  }
}

相关文章

猜您喜欢

网友评论

Copyright 2020 www.hris-software.net 【幸运软件站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式