我们再去处理一下购物车项目的点击事件 .. 打开这个组件 .. 在这个 classValue 里面 .. 需要动态添加一个 css 类 ..

名字是 at-checkbox__option--selected .. 如果是 true .. 就会在元素上添加这个类 .. 这样列表项目的复选框就会是被勾选的样式 ..

是否要添加这个类 .. 可以判断一个条件 .. 用一下 selected.includes .. 看看被选择的列表里面，有没有 value 这个属性 .. 如果有就在这个项目上添加这个类 ..

然后处理一下列表项目包装上面的属性 .. 添加一个 onClick .. 使用 this.handleClick 来处理 .. bind 一个 this .. 还有 index .. 这个 index 是项目的索引号 .. 在事件处理方法里面，可以利用这个索引号得到被按的这个项目 ..

在上面添加这个事件处理方法 .. handleClick .. 接收一个 index 参数 .. 方法里面先从组件的属性里解构出来一些东西 .. selected .. 还有 items .. 来自 this.props ..

下面添加一个 item .. 它的值是 items 里的指定索引号的项目 ..

然后从 item 里解构出来一些东西 .. 需要 product_id ，命名为 value .. 来自 item ..

再去创建一个 Set .. 名字是 selectedSet .. 新建一个 Set .. 集合里的项目是 selected ..

下面判断一下 .. 如果 selectedSet 里面没有指定的值 .. 就去把它添加到这个 set 里面 .. 往 set 里添加项目用一下 add 方法 .. 值是 value ..

不然的话 .. 就从 set 里移除这个项目 .. 用 delete 方法 .. 删除掉 value 这个项目 ..

最后执行一下 this.props.onChange .. 给它一个数组 .. 再把 selectedSet 里的项目解构出来放在这个数组里面 ..

在模拟器上，试一下购物车项目的勾选项目的功能 ...