React实现二级联动的方法

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

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

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

小程序效果

好久以前的一个方法，给大家发下实现代码：

1、页面里有一个选择时间的弹框模块

 {this.state.isToggleOn && (
    
   )}

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 (
      
        
      
    );
  }
}

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 (
      
        
          送达时间
          
        
        
          
            {this.props.list.map((info, index) => (
              
                {info ? info.date : ""}
              
            ))}
          
          
            {this.state.timeList.map((info, index) => (
              
                
                  {info}
                  
                
              
            ))}
          
        
      
    );
  }
}

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