用户登录

2019 前端开发训练营(09/01— 09/10),查看详情 / 报名参加 →

打开 CartItemList 组件 .. 找到它里面的这个 removeItem .. 在它的包装上绑定一个 onClick 事件 .. 用 this.props.onChange 处理 .. bind 一个 this.. 一个类型参数是 input .. 还有一个 value ..

回到购物车页面 ... 找到 CartItemList 组件的 onChange 事件处理 ..

再它的 switch 里面再添加一种情况 .. 如果类型是 remove .. 用一下 this.removeCartItem .. 把 value 的值交给这个方法 ..

在上面去定义一下这个 removeCartItem .. 方法接收一个 id 参数 .. 把这个方法标记成一个 async 方法 ..

它里面添加一个 response .. 用 Taro ..request 请求后端服务.. 请求的方法设置成 DELETE .. 请求的地址是 API_WS .. cart-item ,加上一个 id ..

下面用 switch .. 检查响应里的状态码 .. 添加一种情况 .. 如果状态码是 200 .. 可以设置一下页面的 cart 这个 state .. 先把它从 state 里解构出来 ..

添加一个 newItems .. 它的值应该是去掉了被移除的项目之后的项目列表 .. 在文件顶部导入 lodash .. 名字是下划线 ... 来自 lodash ..

然后这里可以用一下lodash 里的 filter .. 数组是 cart.items ..

当前项目叫 item .. 返回的项目 item 的 product_id 的值不应该等于 id ... 就是把被删除的项目过滤掉 ..

添加一个 newCart .. 它是一个对象 .. 把 cart 里的东西放进来 .. 再添加一个 items .. 它的值应该是 newItems ..

然后再用 this.setState 设置状态 .. 让 cart 等于 newCart ..

回到模拟器 .. 刷新 ... 打开编辑模式 .. 按一下想要删除的购物车项目上的移除小图标 .. 现在可以把这个项目从购物车项目列表里面删除掉 ...

删除购物车项目(removeCartItem)《 电商小程序案例:购物车编辑 》

统计

10856
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点