欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React实现二级联动的方法

程序员文章站 2022-04-11 10:33:50
本文实例为大家分享了react实现二级联动的具体代码,供大家参考,具体内容如下实现效果: 普通h5页,图片我进行了裁剪,把用户那部分删掉了,不过也不影响说明大体思路就是把数据接口从页面传给组件,交互在...

本文实例为大家分享了react实现二级联动的具体代码,供大家参考,具体内容如下

实现效果: 普通h5页,图片我进行了裁剪,把用户那部分删掉了,不过也不影响说明

大体思路就是把数据接口从页面传给组件,交互在组件内执行后,通过ontimechange将选择的数据结果返回给页面,然后展示到页面上。
我用taro写的,语法和react一样。

React实现二级联动的方法

小程序效果

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 二级联动