React实现购物车案例

最新推荐文章于 2023-06-15 09:47:48 发布

菜菜的大神

最新推荐文章于 2023-06-15 09:47:48 发布

阅读量315

点赞数

文章标签： react.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_45256860/article/details/128839219

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.totalPrice {

color: skyblue;

font-weight: bold;

font-size: 30px;

}

</style>

</head>

<body>

</div>

</body>

//定义类式组件

class Shopping extends React.Component {

constructor() {

super()

this.state = {

data: [

{

id: 1,

text: '《Vuejs》',

date: '1999-10-1',

price: 20,

number: 1

{

id: 2,

text: '《Html》',

date: '2000-10-1',

price: 40,

number: 1

{

id: 3,

text: '《JavaScript》',

date: '2001-10-1',

price: 30,

number: 1

{

id: 4,

text: '《React》',

date: '2002-10-1',

price: 50,

number: 1

}

]

}

// 购物车加减删除

subtract(number, index) {

// console.log('-----');

this.setState({

'this.state.data[index]': this.state.data[index].number--,

})

}

add(number, index) {

this.setState({

number: ++this.state.data[index].number,

})

}

deleteBook(index) {

// console.log('删除了图书');

this.setState({

// 过滤器的方式

//data: this.state.data.filter((item, indey) =>

// index != indey

)

})

}

// 计算总价

totalPrice() {

let totalPrice = this.state.data.reduce((pre, item) => {

// console.log(pre);

return pre + item.price * item.number

}, 0)

return totalPrice

}

render() {

let { data, totalPrice } = this.state

let newData = data.map((item, index) => {

return (

<td>{'￥' + item.price}</td>

<td>

<button disabled={item.number === 1 ? true : false} onClick={() => this.subtract(item.number, index)}>-</button>

<span>{item.number}</span>

<button onClick={() => this.add(item.number, index)}>+</button>

</td>

<td>

<button onClick={() => this.deleteBook(index)}>删除</button>

</td>

</tr>

)

})

return (

<div>

<thead>

<tr>

</tr>

</thead>

<tbody>

{newData}

</tbody>

</table>

<span >商品总价:￥{this.totalPrice()} </span>

</div>

)

}

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<Shopping />)

</script>

</html>

菜菜的大神

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React实现购物车案例

最简单的React购物车案例
复制链接

扫一扫

React实现购物车案例

“相关推荐”对你有帮助么？