平武建站

怎么使用React列表栏及购物车组件

本篇内容介绍了“怎么使用React列表栏及购物车组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联公司专业为企业提供双城网站建设、双城做网站、双城网站设计、双城网站制作等企业网站建设、网页设计与制作、双城企业网站模板建站服务，10多年双城做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

一、组件介绍

商家详细界面（StoreDetail组件）：

import React from 'react';
import axios from 'axios';
import GoBack from '../smallPage/GoBack';
import '../../Assets/css/storeDetail.css';
import MenuList from '../../Mock/MenuList';
import Order from '../menuPage/Order';
import Evaluate from '../menuPage/Evaluate';
import Business from '../menuPage/Business';

class StoreDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            food:null,
            menulist:MenuList
        };
    }
    componentDidMount(){
        axios.get("/food").then((res)=>{
            this.setState({
                food:res.data.result.data
            });
            console.log(this.state.food);
        });
    }
    userSelect=(index)=>{
        MenuList.forEach((val,key)=>{
            val.isshow=false;
            if(key===index){
                val.isshow=true;
            }
        });
        this.setState({
            menulist:MenuList
        });
    }
    render() {
        return (
            this.state.food?
                

                    
                    
                        
                        
                        {this.state.food.poi_info.name}
                    

                    

                        
                            {
                                this.state.menulist.map((value,index)=>{
                                    return (
                                        
                                            {value.title}
                                            
                                        
                                    )
                                })
                            }
                        
                    

                    {
                        this.state.menulist.map((value,index)=>{
                            if(value.isshow&&index===0){
                                return 
                            }else if(value.isshow&&index===1){
                                return 
                            }else if(value.isshow&&index===2){
                                return 
                            }else{
                                return '';
                            }
                        })
                    }
                
            :''         );     } } export default StoreDetail;

点单界面（Order组件）：

import React from 'react';
import '../../Assets/css/order.css';
import AddCut from '../smallPage/AddCut';
import Cart from '../smallPage/Cart';

class Order extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            list:[],
            leftindex:0
        };
    }
    scrollRight=(e)=>{
        let scrolltop=e.target.scrollTop;
        let listheight=this.state.list;
        for(let i=0;i=listheight[i]&&scrolltop=listheight.length/2){
                    // 获取左边的ul，让其scrollTop往下顶
                    this.refs.leftul.scrollTop=listheight[i+1];
                }else{
                    // 让其scrollTop往上顶
                    this.refs.leftul.scrollTop=0;
                }
                this.setState({
                    leftindex:i+1
                });
                break;
            }
        }
    }
    // 用户点击时，让当前索引变色
    userClick=(index)=>{
        this.setState({
            leftindex:index
        });
        this.refs.order_scroll.scrollTop=index-1>=0?this.state.list[index-1]:0;
    }
    componentDidMount(){
        let order_block=document.getElementsByClassName("order_block");
        let listinfo=this.state.list;
        // 循环遍历div，拿到每个div的偏移量，再将其push进this.state中进行修改显示，修改后得到listinfo
        // 若为第一个div，则只拿其自身的偏移量；否则，则拿其自身+listinfo[i-1]的偏移量
        for(let i=0;i{
        let ele=this.refs.cart;
        ele.update();
    }
    render() {
        return (
            
                
                    
                        {
                            this.props.orderlist.map((value,index)=>{
                                return (
                                    // 按照索引来判断左边li的颜色
                                    
                                        
                                        {value.name}
                                    
                                )
                            })
                        }
                    
                
                                                              {                             this.props.orderlist.map((value,index)=>{                                 return (                                                                              
                                                {                                                 value.spus.map((v,k)=>{                                                     return (                                                                                                                                                                                                                                                    
                                                                                                                             {v.name}
                                                                {v.praise_content}                                                                                                                                      ￥{v.min_price}/份                                                                                                                                                                                                                                                                                                                 )                                                 })                                             }                                                                                                               )                             })                         }                                                                             );     } } export default Order;

加减页面（AddCut组件）：

import React from 'react';
import '../../Assets/css/addCut.css';
import CartData from '../../Mock/CartData';

class AddCut extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            num:0
        };
    }
    userAdd=()=>{
        let addnum=this.state.num;
        addnum++;
        this.setState({
            num:addnum
        });
        this.addCart(addnum);
        this.props.parent.refComponent();
    }
    userCut=()=>{
        let cutnum=this.state.num;
        cutnum--;
        if(cutnum<0){
            cutnum=0;
        }
        this.setState({
            num:cutnum
        });
        this.addCart(cutnum);
        this.props.parent.refComponent();
    }
    addCart=(num)=>{
        // 产生一个对象集合
        let list={
            name:this.props.name,
            price:this.props.price,
            num:num
        };
        let same=false;
        if(CartData.length===0){
            CartData.push(list);
        }
        for(let i=0;i
                0?'show':'showhidden'} src={require("../../Assets/image/minus.edae56b865f90527f2657782f67d9c3e.png")} alt=""/>
                0?'show':'showhidden'}>{this.state.num}
                
            
        );
    }
}

export default AddCut;

购物车页面（Cart组件）：

import React from 'react';
import '../../Assets/css/cart.css';
import CartData from '../../Mock/CartData';

class Cart extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  
            cart:[],
            totalprice:0
        };
    }
    update=()=>{
        // 读取数据
        this.setState({
            cart:CartData
        });
        // 计算总价
        let prices=0;
        for(let i=0;i
                
                    
                    ￥{this.state.totalprice}

                    另需{this.props.toprice}
                
                去结算
            
        );
    }
}

export default Cart;

二、效果展示

怎么使用React列表栏及购物车组件

“怎么使用React列表栏及购物车组件”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


网站标题：怎么使用React列表栏及购物车组件
标题网址：http://pwwzsj.com/article/jejhcg.html

其他资讯