React リストバーとショッピングカートコンポーネントの使用の詳細な説明

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Reactはクリックするとリスト内の対応する項目が削除されるように実装します
  • React Native カスタム プルダウン リフレッシュ プルアップ ロード済みリストの例
  • React Native インデックス付き都市リスト コンポーネントのサンプル コード
  • Reactモバイル端末は左にスワイプしてリストを削除するサンプルコードを実装します
  • React 学習ノート: リストレンダリングの例の詳細な説明
  • ReactNative ListViewの使い方
  • ショッピングカートのスライド削除効果を実装するReactネイティブサンプルコード
  • React-Native は Mobx を使用してショッピングカート機能を実装します

<<:  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関数レスポンシブデー...

埋め込み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を...