React's method of realizing secondary linkage

This article shares the specific code of React to achieve secondary linkage for your reference. The specific content is as follows

Implementation effect: Ordinary h5 page. I cropped the picture and deleted the user part, but it does not affect the description.

The general idea is to pass the data interface from the page to the component. After the interaction is executed in the component, the selected data result is returned to the page through onTimeChange and then displayed on the page.
I wrote it in Taro, the syntax is the same as react.

Mini Program Effect

A method from a long time ago, I will give you the implementation code:

1. There is a pop-up window module for selecting time on the page

 {this.state.isToggleOn && (
    <Panel
        onTimeChange={this.onTimeChange}
        onClick={this.closeMask}
        list={this.state.timeList} //Interface data status={this.state.status} //Current product status, optional/>
   )}

2. In the pop-up window

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. In the time component

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: ["Ship immediately after group is formed"],
    });
  }

  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>Delivery time</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>
    );
  }
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: