【react | 练习】关于书籍的移除，计算价格......

最新推荐文章于 2024-07-18 19:45:00 发布

-4444x-

最新推荐文章于 2024-07-18 19:45:00 发布

阅读量125

点赞数

分类专栏： react 文章标签： react jsx codewhy

本文链接：https://blog.csdn.net/qq_43490212/article/details/119354169

版权

react 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍 列表</title>
    <style>
        table {
            border: 1px solid #eee;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #eee;
            padding: 10px 16px;
            text-align: center;
        }

        th {
            background-color: #ccc;
        }

        .count {
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <!-- 引入依赖 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


    <script src="./format-utils.js"></script>

    <!-- 编写react代码 -->
    <script type="text/babel">
        class App extends React.Component {
            constructor(props) {
                super(props);

                this.state = {
                    books: [
                        {
                            id: 1,
                            name: '《算法导论》',
                            date: '2006-9',
                            price: 85.00,
                            count: 1
                        },
                        {
                            id: 2,
                            name: '《UNIX编程艺术》',
                            date: '2006-2',
                            price: 59.00,
                            count: 1
                        },
                        {
                            id: 3,
                            name: '《编程珠玑》',
                            date: '2008-10',
                            price: 39.00,
                            count: 1
                        },
                        {
                            id: 4,
                            name: '《代码大全》',
                            date: '2006-3',
                            price: 128.00,
                            count: 1
                        },
                    ]
                }
            }

            renderBooks() {
                return (<div>
                    <table>
                        <thead>
                            <tr>
                                <th></th>
                                <th>书籍名称</th>
                                <th>出版日期</th>
                                <th>价格</th>
                                <th>购买数量</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.books.map((item, index) => {
                                    return (
                                        <tr>
                                            <td>{index + 1}</td>
                                            <td>{item.name}</td>
                                            <td>{item.date}</td>
                                            <td>{formatPrice(item.price)}</td>
                                            <td>
                                                <button disabled={item.count <= 0} onClick={() => { this.changeBooksCount(index, -1) }}>-</button>
                                                <span className='count'>{item.count}</span>
                                                <button onClick={() => { this.changeBooksCount(index, +1) }}>+</button>
                                            </td>
                                            <td>
                                                <button onClick={() => { this.removeBook(index) }}>移除</button>
                                            </td>
                                        </tr>
                                    )
                                })
                            }
                        </tbody>
                    </table>
                    <h3>总价是：{this.getTotalPrice()}</h3>
                </div>
                )
            }

            renderEmptyTip() {
                return <h3>购物车为空</h3>
            }


            render() {
                return this.state.books.length ? this.renderBooks() : this.renderEmptyTip()
            }

            // 计算总价
            getTotalPrice() {
                let totalPrice = 0
                for (let item of this.state.books) {
                    totalPrice += item.price * item.count
                }
                return formatPrice(totalPrice)
            }

            // 移除事件
            removeBook(index) {
                this.setState({
                    books: this.state.books.filter((item, indey) => {
                        return index != indey
                    })
                })
            }

            // +-按钮写同一个方法
            changeBooksCount(index, count) {
                const newBooks = [...this.state.books]
                newBooks[index].count += count;
                this.setState({
                    books: newBooks
                })
            }

        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>
</body>

</html>