本文例項為大家分享了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 "@taro/taro";
import { View,Text } from "@tarojs/components";
import SendTime from "../time";
import "./index.s";

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.datwww.cppcns.com
 
eNum;
    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);
  }

  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]);www.cppcns.com
        }
      );
    }
  }

  getClassName(index) {
    switch (index) {
      case this.state.dateNum:
        return "send-data-li current";
      default:
        return "send-dawww.cppcns.comta-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>
    );
  }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。