经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » React » 查看文章
React列表栏及购物车组件使用详解
来源：jb51　　时间：2021/6/28 12:41:51　　对本文有异议

本文实例为大家分享了React列表栏及购物车组件的具体代码，供大家参考，具体内容如下

一、组件介绍

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

  1. import React from 'react';
  2. import axios from 'axios';
  3. import GoBack from '../smallPage/GoBack';
  4. import '../../Assets/css/storeDetail.css';
  5. import MenuList from '../../Mock/MenuList';
  6. import Order from '../menuPage/Order';
  7. import Evaluate from '../menuPage/Evaluate';
  8. import Business from '../menuPage/Business';
  9.  
  10. class StoreDetail extends React.Component {
  11.     constructor(props) {
  12.         super(props);
  13.         this.state = {  
  14.             food:null,
  15.             menulist:MenuList
  16.         };
  17.     }
  18.     componentDidMount(){
  19.         axios.get("/food").then((res)=>{
  20.             this.setState({
  21.                 food:res.data.result.data
  22.             });
  23.             console.log(this.state.food);
  24.         });
  25.     }
  26.     userSelect=(index)=>{
  27.         MenuList.forEach((val,key)=>{
  28.             val.isshow=false;
  29.             if(key===index){
  30.                 val.isshow=true;
  31.             }
  32.         });
  33.         this.setState({
  34.             menulist:MenuList
  35.         });
  36.     }
  37.     render() {
  38.         return (
  39.             this.state.food?
  40.                 <div>
  41.                     <GoBack title={this.state.food.poi_info.name}/>
  42.                     <div className="foodimage">
  43.                         <img src={this.state.food.poi_info.pic_url} alt=""/>
  44.                         <img src={this.state.food.poi_info.head_pic_url} alt=""/>
  45.                         <span>{this.state.food.poi_info.name}</span>
  46.                     </div>
  47.                     <div>
  48.                         <ul className="menulist">
  49.                             {
  50.                                 this.state.menulist.map((value,index)=>{
  51.                                     return (
  52.                                         <li key={index} onClick={this.userSelect.bind(this,index)}>
  53.                                             {value.title}
  54.                                             <span className={value.isshow?'foodline':''}></span>
  55.                                         </li>
  56.                                     )
  57.                                 })
  58.                             }
  59.                         </ul>
  60.                     </div>
  61.                     {
  62.                         this.state.menulist.map((value,index)=>{
  63.                             if(value.isshow&&index===0){
  64.                                 return <Order toprice={this.state.food.poi_info.shipping_fee_tip} orderlist={this.state.food.food_spu_tags} key={index}/>
  65.                             }else if(value.isshow&&index===1){
  66.                                 return <Evaluate key={index}/>
  67.                             }else if(value.isshow&&index===2){
  68.                                 return <Business key={index}/>
  69.                             }else{
  70.                                 return '';
  71.                             }
  72.                         })
  73.                     }
  74.                 </div>
  75.             :''
  76.         );
  77.     }
  78. }
  79.  
  80. export default StoreDetail;

点单界面（Order组件）：

  1. import React from 'react';
  2. import '../../Assets/css/order.css';
  3. import AddCut from '../smallPage/AddCut';
  4. import Cart from '../smallPage/Cart';
  5.  
  6. class Order extends React.Component {
  7.     constructor(props) {
  8.         super(props);
  9.         this.state = {  
  10.             list:[],
  11.             leftindex:0
  12.         };
  13.     }
  14.     scrollRight=(e)=>{
  15.         let scrolltop=e.target.scrollTop;
  16.         let listheight=this.state.list;
  17.         for(let i=0;i<listheight.length-1;i++){
  18.             if(scrolltop<listheight[i]){
  19.                 // 在滑动的时候取其数组中的第某个集合并且修改索引值
  20.                 this.setState({
  21.                     leftindex:i
  22.                 });
  23.                 break;
  24.             }else if(scrolltop>=listheight[i]&&scrolltop<listheight[i+1]){
  25.                 // 当右边滑动值大于整个高的一半时，左边的索引需要往下走
  26.                 if(i+1>=listheight.length/2){
  27.                     // 获取左边的ul，让其scrollTop往下顶
  28.                     this.refs.leftul.scrollTop=listheight[i+1];
  29.                 }else{
  30.                     // 让其scrollTop往上顶
  31.                     this.refs.leftul.scrollTop=0;
  32.                 }
  33.                 this.setState({
  34.                     leftindex:i+1
  35.                 });
  36.                 break;
  37.             }
  38.         }
  39.     }
  40.     // 用户点击时，让当前索引变色
  41.     userClick=(index)=>{
  42.         this.setState({
  43.             leftindex:index
  44.         });
  45.         this.refs.order_scroll.scrollTop=index-1>=0?this.state.list[index-1]:0;
  46.     }
  47.     componentDidMount(){
  48.         let order_block=document.getElementsByClassName("order_block");
  49.         let listinfo=this.state.list;
  50.         // 循环遍历div，拿到每个div的偏移量，再将其push进this.state中进行修改显示，修改后得到listinfo
  51.         // 若为第一个div，则只拿其自身的偏移量；否则，则拿其自身+listinfo[i-1]的偏移量
  52.         for(let i=0;i<order_block.length;i++){
  53.             if(i===0){
  54.                 listinfo.push(order_block[i].offsetHeight);
  55.             }else{
  56.                 listinfo.push(order_block[i].offsetHeight+listinfo[i-1]);
  57.             }
  58.         }
  59.         this.setState({
  60.             list:listinfo
  61.         });
  62.         // console.log(listinfo);  (11) [550, 612, 1284, 1712, 2628, 5496, 7083, 8609, 9099, 9465, 10747]
  63.     }
  64.     // 调用子组件Cart里的强制刷新方法，在AddCut组件里执行方法
  65.     refComponent=()=>{
  66.         let ele=this.refs.cart;
  67.         ele.update();
  68.     }
  69.     render() {
  70.         return (
  71.             <div className="order">
  72.                 <div className="order_left">
  73.                     <ul ref="leftul">
  74.                         {
  75.                             this.props.orderlist.map((value,index)=>{
  76.                                 return (
  77.                                     // 按照索引来判断左边li的颜色
  78.                                     <li onClick={this.userClick.bind(this,index)} className={this.state.leftindex===index?'leftli leftli_color':'leftli'} key={index}>
  79.                                         <img src={value.icon} alt=""/>
  80.                                         <span>{value.name}</span>
  81.                                     </li>
  82.                                 )
  83.                             })
  84.                         }
  85.                     </ul>
  86.                 </div>
  87.                 <div onScroll={this.scrollRight} className="order_right">
  88.                     <div ref="order_scroll" className="order_scroll">
  89.                         {
  90.                             this.props.orderlist.map((value,index)=>{
  91.                                 return (
  92.                                     <div className="order_block" key={index}>
  93.                                         <ul>
  94.                                             {
  95.                                                 value.spus.map((v,k)=>{
  96.                                                     return (
  97.                                                         <li key={k}>
  98.                                                             <div className="order_block_img">
  99.                                                                 <img src={v.picture} alt=""/>
  100.                                                             </div>
  101.                                                             <div className="order_block_word">
  102.                                                                 <div className="order_block_word_name">{v.name}</div>
  103.                                                                 <div className="order_block_word_zan">{v.praise_content}</div>
  104.                                                                 <div className="order_block_word_price">
  105.                                                                     <span>￥{v.min_price}</span>/份
  106.                                                                     <AddCut parent={this} name={v.name} price={v.min_price}/>
  107.                                                                 </div>
  108.                                                             </div>
  109.                                                         </li>
  110.                                                     )
  111.                                                 })
  112.                                             }
  113.                                         </ul>
  114.                                     </div>
  115.                                 )
  116.                             })
  117.                         }
  118.                     </div>
  119.                 </div>
  120.                 <Cart ref="cart" toprice={this.props.toprice}/>
  121.             </div>
  122.         );
  123.     }
  124. }
  125.  
  126. export default Order;

加减页面（AddCut组件）：

  1. import React from 'react';
  2. import '../../Assets/css/addCut.css';
  3. import CartData from '../../Mock/CartData';
  4.  
  5. class AddCut extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  8.         this.state = {  
  9.             num:0
  10.         };
  11.     }
  12.     userAdd=()=>{
  13.         let addnum=this.state.num;
  14.         addnum++;
  15.         this.setState({
  16.             num:addnum
  17.         });
  18.         this.addCart(addnum);
  19.         this.props.parent.refComponent();
  20.     }
  21.     userCut=()=>{
  22.         let cutnum=this.state.num;
  23.         cutnum--;
  24.         if(cutnum<0){
  25.             cutnum=0;
  26.         }
  27.         this.setState({
  28.             num:cutnum
  29.         });
  30.         this.addCart(cutnum);
  31.         this.props.parent.refComponent();
  32.     }
  33.     addCart=(num)=>{
  34.         // 产生一个对象集合
  35.         let list={
  36.             name:this.props.name,
  37.             price:this.props.price,
  38.             num:num
  39.         };
  40.         let same=false;
  41.         if(CartData.length===0){
  42.             CartData.push(list);
  43.         }
  44.         for(let i=0;i<CartData.length;i++){
  45.             if(CartData[i].name===this.props.name){
  46.                 CartData[i].num=num;
  47.                 same=true;
  48.             }
  49.         }
  50.         if(!same){
  51.             CartData.push(list);
  52.         }
  53.     }
  54.     render() {
  55.         return (
  56.             <div className="addcut">
  57.                 <img onClick={this.userCut}  className={this.state.num>0?'show':'showhidden'} src={require("../../Assets/image/minus.edae56b865f90527f2657782f67d9c3e.png")} alt=""/>
  58.                 <span className={this.state.num>0?'show':'showhidden'}>{this.state.num}</span>
  59.                 <img onClick={this.userAdd} src={require("../../Assets/image/plus.af10af5a9cee233c612b3cff5c2d70cd.png")} alt=""/>
  60.             </div>
  61.         );
  62.     }
  63. }
  64.  
  65. export default AddCut;

购物车页面（Cart组件）：

  1. import React from 'react';
  2. import '../../Assets/css/cart.css';
  3. import CartData from '../../Mock/CartData';
  4.  
  5. class Cart extends React.Component {
  6.     constructor(props) {
  7.         super(props);
  8.         this.state = {  
  9.             cart:[],
  10.             totalprice:0
  11.         };
  12.     }
  13.     update=()=>{
  14.         // 读取数据
  15.         this.setState({
  16.             cart:CartData
  17.         });
  18.         // 计算总价
  19.         let prices=0;
  20.         for(let i=0;i<CartData.length;i++){
  21.             prices+=CartData[i].price*CartData[i].num;
  22.         }
  23.         this.setState({
  24.             totalprice:prices
  25.         });
  26.     }
  27.     render() {
  28.         return (
  29.             <div className="cart">
  30.                 <div className="cart_left">
  31.                     <img src={require("../../Assets/image/shop-icon.3a615332a0e634909dc3aa3a50335c8f.png")} alt=""/>
  32.                     <span>￥{this.state.totalprice}</span><br/>
  33.                     <span>另需{this.props.toprice}</span>
  34.                 </div>
  35.                 <div className="cart_right">去结算</div>
  36.             </div>
  37.         );
  38.     }
  39. }
  40.  
  41. export default Cart;

二、效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

React热门文章

  • React报错解决之ref返回undefined或null
  • 使用react-beautiful-dnd实现列表间拖拽踩坑
  • 理解 React 中的 useEffect、useMemo 与 useCallback
  • React antd tabs切换造成子组件重复刷新
  • vue3+ts中ref与reactive指定类型实现示例
  • 基于React.js实现简单的文字跑马灯效果
  • 深入解析React DnD拖拽原理，轻松掌握拖放技巧！
  • react实现全局组件确认弹窗
  • React使用高德地图的实现示例(react-amap)
  • react 高效高质量搭建后台系统 系列 —— 表格的封装

    • React推荐文章

  • Antd-React-TreeSelect前端搜索过滤
  • React组件封装：文字、表情评论框
  • Taro：高性能小程序的最佳实践
  • Netty源码学习4——服务端是处理新连接的&netty的reactor模式
  • 关于 React 性能优化和数栈产品中的实践
  • 【Vue3响应式入门#01】Reactivity
  • React跨路由组件动画
  • Vue vs React：你需要知道的一切
  • 为react项目添加开发/提交规范（前端工程化、eslint、prettier、husky、commitlint、stylelint）
  • react18 hooks自定义移动端Popup弹窗组件RcPop

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号