React リストバーとショッピングカートコンポーネントの使用の詳細な説明
|
この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。
1. コンポーネントの紹介販売者詳細インターフェース (StoreDetail コンポーネント):
'react' から React をインポートします。
'axios' から axios をインポートします。
'../smallPage/GoBack' から GoBack をインポートします。
'../../Assets/css/storeDetail.css' をインポートします。
'../../Mock/MenuList' から MenuList をインポートします。
'../menuPage/Order' から Order をインポートします。
'../menuPage/Evaluate' から Evaluate をインポートします。
'../menuPage/Business' から Business をインポートします。
クラスStoreDetailはReact.Componentを拡張します。
コンストラクタ(props) {
スーパー(小道具);
この状態 = {
食べ物:null、
メニューリスト:メニューリスト
};
}
コンポーネントマウント(){
axios.get("/food").then((res)=>{
this.setState({
食品:res.data.結果データ
});
console.log(this.state.food);
});
}
ユーザー選択=(インデックス)=>{
メニューリスト.forEach((val,key)=>{
val.isshow=false;
if(キー===インデックス){
val.isshow=true;
}
});
this.setState({
メニューリスト:メニューリスト
});
}
与える（） {
戻る （
this.state.food?
<div>
<GoBack title={this.state.food.poi_info.name}/>
<div className="foodimage">
<img src={this.state.food.poi_info.pic_url} alt=""/>
<img src={this.state.food.poi_info.head_pic_url} alt=""/>
<span>{this.state.food.poi_info.name}</span>
</div>
<div>
<ul className="メニューリスト">
{
this.state.menulist.map((値,インデックス)=>{
戻る （
<li キー = {index} onClick = {this.userSelect.bind(this,index)}>
{値.タイトル}
<span className={value.isshow?'foodline':''}></span>
</li>
）
})
}
</ul>
</div>
{
this.state.menulist.map((値,インデックス)=>{
if(value.isshow&&index===0){
戻り値 <Order toprice={this.state.food.poi_info.shipping_fee_tip} orderlist={this.state.food.food_spu_tags} key={index}/>
}そうでない場合、value.isshow&&index===1 の場合{
戻り値 <キー={index} を評価/>
}そうでない場合、value.isshow&&index===2{
<ビジネスキー={index}/> を返します
}それ以外{
戻る '';
}
})
}
</div>
:''
);
}
}
デフォルトの StoreDetail をエクスポートします。注文インターフェース（注文コンポーネント）:
'react' から React をインポートします。
'../../Assets/css/order.css' をインポートします。
'../smallPage/AddCut' から AddCut をインポートします。
'../smallPage/Cart' から Cart をインポートします。
クラスOrderはReact.Componentを拡張します。
コンストラクタ(props) {
スーパー(小道具);
この状態 = {
リスト：[]、
左インデックス:0
};
}
右スクロール=(e)=>{
scrolltop=e.target.scrollTop とします。
listheight=this.state.list とします。
for(let i=0;i<listheight.length-1;i++){
if(スクロールトップ<リスト高さ[i]){
// スライドするときに、配列の最初のセットを取得し、インデックス値を変更します this.setState({
左インデックス:i
});
壊す;
}それ以外の場合(スクロールトップ>=リストハイト[i]&&スクロールトップ<リストハイト[i+1]){
// 右のスライド値が全体の高さの半分より大きい場合、左のインデックスを下げる必要があります if (i+1>=listheight.length/2) {
// 左側の ul を取得し、その scrollTop を下に移動します。this.refs.leftul.scrollTop=listheight[i+1];
}それ以外{
// scrollTop を上に移動します this.refs.leftul.scrollTop=0;
}
this.setState({
左インデックス:i+1
});
壊す;
}
}
}
// ユーザーがクリックすると、現在のインデックスの色を変更します userClick=(index)=>{
this.setState({
左インデックス:インデックス
});
this.refs.order_scroll.scrollTop=index-1>=0?this.state.list[index-1]:0;
}
コンポーネントマウント(){
order_block を document.getElementsByClassName("order_block"); とします。
listinfo=this.state.list; とします。
// div をループし、各 div のオフセットを取得し、それを this.state にプッシュして変更して表示します。変更後、listinfo を取得します。
// 最初のdivの場合は、そのdivのオフセットのみを取得します。それ以外の場合は、そのdivのオフセット+ listinfo[i-1]を取得します。 for(let i=0;i<order_block.length;i++){
もし(i===0){
listinfo.push(order_block[i].offsetHeight);
}それ以外{
listinfo.push(order_block[i].offsetHeight+listinfo[i-1]);
}
}
this.setState({
リスト:リスト情報
});
// console.log(listinfo); (11) [550, 612, 1284, 1712, 2628, 5496, 7083, 8609, 9099, 9465, 10747]
}
// 子コンポーネント Cart で強制更新メソッドを呼び出し、AddCut コンポーネントでメソッドを実行します refComponent=()=>{
ele = this.refs.cart; とします。
ele.update();
}
与える（） {
戻る （
<div className="order">
<div className="order_left">
<ul ref="leftul">
{
this.props.orderlist.map((値,インデックス)=>{
戻る （
// インデックスに応じて左の li の色を決定します<li onClick={this.userClick.bind(this,index)} className={this.state.leftindex===index?'leftli leftli_color':'leftli'} key={index}>
<img src={value.icon} alt=""/>
<span>{値の名前}</span>
</li>
）
})
}
</ul>
</div>
<div onScroll={this.scrollRight} クラス名="order_right">
<div ref="order_scroll" className="order_scroll">
{
this.props.orderlist.map((値,インデックス)=>{
戻る （
<div className="order_block" キー={index}>
<ul>
{
値.spus.map((v,k)=>{
戻る （
<li キー = {k}>
<div className="order_block_img">
<img src={v.picture} alt=""/>
</div>
<div className="order_block_word">
<div className="order_block_word_name">{v.name}</div>
<div className="order_block_word_zan">{v.praise_content}</div>
<div className="order_block_word_price">
<span>￥{v.min_price}</span>/個<AddCut parent={this} name={v.name} price={v.min_price}/>
</div>
</div>
</li>
）
})
}
</ul>
</div>
）
})
}
</div>
</div>
<カート ref="cart" toprice={this.props.toprice}/>
</div>
);
}
}
デフォルトの順序をエクスポートします。ページの追加と削除 (AddCut コンポーネント):
'react' から React をインポートします。
'../../Assets/css/addCut.css' をインポートします。
'../../Mock/CartData' から CartData をインポートします。
クラスAddCutはReact.Componentを拡張します{
コンストラクタ(props) {
スーパー(小道具);
この状態 = {
番号:0
};
}
ユーザー追加=()=>{
addnum=this.state.num; とします。
数値++を追加します。
this.setState({
数値:数値を追加
});
this.addCart(追加番号);
this.props.parent.refComponent();
}
ユーザーカット=()=>{
cutnum=this.state.num; とします。
カットナム--;
if(カット数<0){
カット番号=0;
}
this.setState({
数値:カット数
});
this.addCart(カット番号);
this.props.parent.refComponent();
}
addCart=(数値)=>{
// オブジェクトコレクションを生成する let list={
名前:this.props.name、
価格:this.props.price,
番号:番号
};
同じ=falseとします。
カートデータの長さが0の場合
CartData.push(リスト);
}
for(let i=0;i<CartData.length;i++){
CartData[i].name===this.props.nameの場合{
CartData[i].num=数値;
同じ=真;
}
}
if(!同じ){
CartData.push(リスト);
}
}
与える（） {
戻る （
<div className="addcut">
<img onClick={this.userCut} className={this.state.num>0?'show':'showhidden'} src={require("../../Assets/image/minus.edae56b865f90527f2657782f67d9c3e.png")} alt=""/>
<span className={this.state.num>0?'show':'showhidden'}>{this.state.num}</span>
<img onClick={this.userAdd} src={require("../../Assets/image/plus.af10af5a9cee233c612b3cff5c2d70cd.png")} alt=""/>
</div>
);
}
}
デフォルトのAddCutをエクスポートします。ショッピングカートページ（カートコンポーネント）:
'react' から React をインポートします。
'../../Assets/css/cart.css' をインポートします。
'../../Mock/CartData' から CartData をインポートします。
クラスCartはReact.Componentを拡張します。
コンストラクタ(props) {
スーパー(小道具);
この状態 = {
カート：[]、
合計価格:0
};
}
更新=()=>{
// データを読み込む this.setState({
カート:CartData
});
// 合計価格を計算します let prices=0;
for(let i=0;i<CartData.length;i++){
価格+=CartData[i].price*CartData[i].num;
}
this.setState({
合計価格:価格
});
}
与える（） {
戻る （
<div className="カート">
<div className="cart_left">
<img src={require("../../Assets/image/shop-icon.3a615332a0e634909dc3aa3a50335c8f.png")} alt=""/>
<span>￥{this.state.totalprice}</span><br/>
<span>{this.props.toprice} も必須です</span>
</div>
<div className="cart_right">チェックアウトへ進む</div>
</div>
);
}
}
デフォルトのカートをエクスポートします。2. エフェクト表示
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で MySQL 5.6 X64 バージョンをインストールする詳細な手順
>>: マルチポートおよびマルチドメイン名アクセスのNginx構成の実装
推薦する
CSS3 で @media を使用して Web ページの適応を実現するためのサンプル コード
現在、コンピュータモニターの画面解像度はますます高くなる傾向にありますが、携帯電話などのモバイルデバ...
一般的な HBase 運用および保守ツール 10 個の概要
概要: HBase には、ユーザーに管理、分析、修復、デバッグ機能を提供するための多くの操作および保...
Navicat PremiumはMySQLデータベースを操作します（SQL文を実行します）
1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...
ドラッグ位置プレビューを実装するネイティブJS
この記事では、要素をドラッグするときにプレビューを追加する小さなデモを紹介します。効果は次のとおりで...
jsは水平および垂直スライダーを実現します
最近、練習プロジェクトをしていたときにスライダーを使う必要があったので、調べてみました。まず、水平ス...
ユーザーはその理由を知る必要がある
証券会社にいた頃、設計業務が忙しくなかったため、商品のマニュアルを書く役割を担ったことがありました。...
Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介
目次リアクティブ機能使用法： toRef 関数 (理解するだけ)使用法： ref関数レスポンシブデー...
従来の Tomcat スタートアップ サービスと Springboot スタートアップ組み込み Tomcat サービス (推奨) の違い
springmvc による Spring の統合Spring 統合 springmvc の web....
埋め込みJavaScriptと外部リンクの基本的な応用方法
目次埋め込みJavaScriptと外部リンクの基本的な応用JavaScript の記述方法には、イン...
Debian 9 システムに MySQL データベースをインストールする方法
序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...
純粋な CSS でマークダウンの自動番号付けを実装するサンプル コード
問題の起源私がタイトルの番号付けの問題に初めて注目したのは、学部の論文を書いていた頃まで遡ります。当...
MySQL 8.0 DDLアトミック機能と実装原則
1. DDLアトミック性の概要8.0 より前は、統一されたデータ ディクショナリ dd はありません...
ウェブページ入力ボックスのスタイルトリガー効果
<br />この例では、主に onblur と onFocus という 2 つのパラメー...
vuex名前空間の使用
目次Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェク...
Zabbixで電子メールアラートを実装する方法
オンラインチュートリアルに従って実装しました。 zabbix3.4、スクリプトとsendEmailを...