React實現二級聯動的方法

Posted on by

本文實例為大傢分享瞭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>
    );
  }
}

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：