How to realize two-level linkage with React

This article is to share with you how to achieve secondary linkage in React. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows

Realization effect: ordinary H6 page, I cut the picture and deleted the user part, but it does not affect the description.

The general idea is to transfer the data interface from the page to the component, and after the interaction is executed in the component, the selected data results are returned to the page through onTimeChange, and then displayed on the page.

I wrote it in Taro, and the grammar is the same as react.

Mini Program effect

A method from a long time ago, send you the implementation code:

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

{this.state.isToggleOn & & ()}

2. In the bullet box

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. 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 X 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.timeSegementList [index]: ""; if (index! = 0) {this.onTimeChange (date, time);}} onTimeChange (date, time) {this.props.onTimeChange (date, time);} componentWillMount () {this.setState ({timeList: ["ship immediately after grouping"],}) } 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 (delivery time {this.props.list.map ((info, index) = > ({info? Info.date: ""})} {this.state.timeList.map ((info, index) = > ({info}))}) Thank you for your reading! This is the end of this article on "how to achieve secondary linkage in React". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!