React实现二级联动的方法

本文实例为大家分享了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>
    );
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。