この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 実施効果:普通のh5ページ。写真をトリミングし、ユーザー部分を削除しましたが、説明には影響しません。 一般的な考え方は、ページからコンポーネントにデータ インターフェイスを渡すことです。コンポーネントでインタラクションが実行されると、選択されたデータ結果が onTimeChange を通じてページに返され、ページに表示されます。 ミニプログラム効果 かなり昔の方法ですが、実装コードを紹介します。 1. ページ上に時間を選択するためのポップアップウィンドウモジュールがあります {this.state.isToggleOn && ( <パネル onTimeChange={this.onTimeChange} onClick={this.closeMask} list={this.state.timeList} //インターフェースデータ status={this.state.status} //現在の製品ステータス(オプション)/> )} 2. ポップアップウィンドウで "@tarojs/taro" から { コンポーネント } をインポートします。 "@tarojs/components" から View、Text をインポートします。 SendTime を "../time" からインポートします。 「./index.scss」をインポートします。 デフォルトのクラス Panel をエクスポートし、Component を拡張します { コンストラクタ(props) { スーパー(小道具); } 静的デフォルトプロパティ = { リスト: [], 状態: "" }; クリック() { this.properties を onClick() します。 } onTimeChange(日付、時刻) { this.props.onTimeChange(日付、時刻); } 与える() { 戻る ( <View className="panel-modal"> <送信時間 リスト={this.props.list} onClick={this.onClick} onTimeChange={this.onTimeChange} ステータス = {this.props.status} /> </表示> ); } } 3. 時間要素 "@tarojs/taro" から { コンポーネント } をインポートします。 "@tarojs/components" から View、Text をインポートします。 「../../image」から imageList をインポートします。 「./index.scss」をインポートします。 dateNum = 0 とします。 時間数 = 0; エクスポートデフォルトクラス SendTime は Component を拡張します { コンストラクタ(props) { スーパー(小道具); この状態 = { 日付番号: 日付番号、 時間番号: 時間番号、 タイムリスト: [], }; } 静的デフォルトプロパティ = { リスト: [], }; クリック() { this.properties を onClick() します。 } switchDay(インデックス、情報) { this.setState({ dateNum: インデックス、 }); dateNum = インデックス; this.switchTime(timeNum); date = info ? info.date : "" とします。 time = info && info.timeSegementList ? info.timeSegementList[0] : "" とします。 this.setState({ タイムリスト: info.timeSegmentList、 }); this.onTimeChange(日付、時刻); } スイッチタイム(インデックス) { dateNum = this.state.dateNum; とします。 this.setState({ timeNum: インデックス、 }); timeNum = インデックス; date = this.props.list[dateNum] ? this.props.list[dateNum].date : ""; とします。 time = this.props.list[dateNum]とします。 ? this.props.list[日付番号].timeSegementList[インデックス] : ""; (インデックス!= 0)の場合{ this.onTimeChange(日付、時刻); } } onTimeChange(日付、時刻) { this.props.onTimeChange(日付、時刻); } コンポーネントマウント() { this.setState({ timeList: ["グループが形成された直後に出荷"], }); } コンポーネントマウント() { if (this.props.status) { this.switchDay(dateNum, this.props.list[dateNum]); } それ以外 { (日付番号 = 0)、(時刻番号 = 0); this.setState() は、 { データ番号: 0, 時間番号: 0, }, () => { this.switchDay(0, this.props.list[0]); } ); } } getClassName(インデックス) { スイッチ (インデックス) { ケース this.state.dateNum: 「send-data-li current」を返します。 デフォルト: 「send-data-li」を返します。 } } 与える() { 戻る ( <表示> <View className="send-time-title" onClick={this.onClick}> <Text>配達時間</Text> <View className="close" /> </表示> <View className="send-time-cont"> <View className="送信日リスト"> {this.props.list.map((情報、インデックス) => ( <表示 キー={インデックス} クラス名={ インデックス === this.state.dateNum ? "送信データ-li 現在の" : 「送信データli」 } onClick={this.switchDay.bind(this, index, info)} > <Text className="txt">{info ? info.date : ""}</Text> </表示> ))} </表示> <View className="send-r-time"> {this.state.timeList.map((情報、インデックス) => ( <表示 キー={インデックス} クラス名={ インデックス === this.state.timeNum ?「send-r-li current」 : 「send-r-li」 } onClick={this.switchTime.bind(this, インデックス)} > <View class="send-r-flex"> <Text class="txt">{情報}</Text> <画像 className="blue-ok" src={imageList.blueOk} モード={"アスペクトフィット"} 遅延読み込み={true} /> </表示> </表示> ))} </表示> </表示> </表示> ); } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL監視ツールmysql-monitorの詳細な説明
>>: Linux rpm および yum コマンドとその使用法の詳細な説明
<Head>……</head> は <HTML> のファイル ヘ...
ステートメント 1: <link rel="shortcut icon" ...
A: 通常はクライアントに保存されます。 jwt または JSON Web Token は、リクエス...
まず: <abbr> または <acronym>これら 2 つの記号は同じ意...
WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...
序文Linux 環境で作業するエンジニアは、これらの面倒な命令とパラメータのコマンドラインにきっと驚...
目次1. 外部キー制約外部キーとは何ですか?外部キーを使用する条件:外部キーの定義構文は次のとおりで...
utf8mb4 エンコーディングは utf8 エンコーディングのスーパーセットであり、utf8 と互...
目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...
プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...
<meta name="viewport" content="...
現在、新しいアプリプロジェクトを開発中です。私にとっても初めてのアプリ開発です。チームで調査と検討を...
メタ宣言注釈の手順: 1. モバイル ページと 1 対 1 で対応するすべての PC ページを分類し...
1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...
<p><b>これは太字フォントです</b></p> ...