React（三）小案例

小羽苏

已于 2022-11-17 09:37:50 修改

阅读量189

点赞数

分类专栏：前端框架基础文章标签： react.js javascript 前端

于 2022-11-08 16:49:36 首次发布

本文链接：https://blog.csdn.net/qq_52773679/article/details/127752901

版权

前端框架基础专栏收录该内容

8 篇文章 0 订阅

订阅专栏

通过计数器，tabbar与购物车等小案例来掌握之前学习过的条件渲染，列表渲染与属性绑定等知识

计数器

通过两个按钮来控制数字的增减，这个案例比较简单，直接将counter作为响应式数据，并且点击按钮时进行修改就行
在这里插入图片描述

  <body>
    <div id="root"></div>
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/babel.js"></script>
    <script type="text/babel">
      class App extends React.Component {
        constructor() {
          super()
          this.state = {
            counter: 0,
          }
        }
        increament() {
          this.setState({
            counter: this.state.counter + 1,
          })
        }
        decreament() {
          this.setState({
            counter: this.state.counter - 1,
          })
        }
        render() {
          return (
            <div>
              <button onClick={() => this.decreament()}>-</button>
              <span style={{ padding: "10px" }}>{this.state.counter}</span>
              <button onClick={() => this.increament()}>+</button>
            </div>
          )
        }
      }
      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<App />)
    </script>
  </body>

tabbar

功能为点击时切换选中状态，也就是修改背景色，通过该案例掌握事件绑定（传参）与属性绑定
在这里插入图片描述

<body>
  <div id="root"></div>
  <script src="./lib/react.js"></script>
  <script src="./lib/react-dom.js"></script>
  <script src="./lib/babel.js"></script>
  <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super()
        this.state = {
          idx: 0,
          tabs: ["首页", "分类", "相册", "关于"],
        }
      }
      getIdx(idx) {
        this.setState({
          idx,
        })
      }
      render() {
        return (
          <div style={{ display: "flex" }}>
            {this.state.tabs.map((item, idx) => {
              return (
                <div
                  onClick={() => this.getIdx(idx)}
                  style={{
                    padding: "10px",
                    backgroundColor: idx === this.state.idx ? "#368" : "#ccc",
                  }}
                  key={item}
                >
                  {item}
                </div>
              )
            })}
          </div>
        )
      }
    }
    const root = ReactDOM.createRoot(document.getElementById("root"))
    root.render(<App />)
  </script>
</body>

通过比较state中的idx与当前元素的idx是否相等判断是否为激活状态（style中的背景色）
为了修改idx，在绑定事件时传入当前元素的idx从而确认点击的tab

购物车

这个案例实现了以下功能

对于books进行列表渲染
按钮控制当前 book的count
数量为0时，减按钮处于禁用状态
下方可显示总价格
点击删除按钮可以删除当前整条数据

 <body>
   <div id="root"></div>
   <script src="./lib/react.js"></script>
   <script src="./lib/react-dom.js"></script>
   <script src="./lib/babel.js"></script>
   <script type="text/babel">
     const books = [
       { name: "《你不知道的JavaScript》", prace: 100, count: 0, id: 1 },
       { name: "《Javascript高级程序设计》", prace: 87, count: 0, id: 2 },
       { name: "《图解HTTP》", prace: 78, count: 0, id: 3 },
       { name: "《算法的乐趣》", prace: 56, count: 0, id: 4 },
     ]
     class App extends React.Component {
       constructor() {
         super()
         this.state = {
           books,
         }
       }
       increament(idx) {
         const newBooks = [...this.state.books]
         newBooks[idx].count += 1
         this.setState({
           books: newBooks,
         })
       }
       decreament(idx) {
         const newBooks = [...this.state.books]
         newBooks[idx].count -= 1
         this.setState({
           books: newBooks,
         })
       }
       removeItem(idx) {
         const newBooks = [...this.state.books]
         newBooks.splice(idx, 1)
         this.setState({
           books: newBooks,
         })
       }
       render() {
         return (
           <div>
             <table>
               <thead>
                 <tr>
                   <td>序号</td>
                   <td>书名</td>
                   <td>单价</td>
                   <td>数量</td>
                   <td>移除</td>
                 </tr>
               </thead>
               {this.state.books.length === 0 && <h1>购物车为空</h1>}
               <tbody>
             </table>
             <div style={{ fontSize: "22px" }}>
               总价格
               {"￥" +
                 this.state.books.reduce((preValue, item) => {
                   console.log(preValue, item.count, item.prace)
                   return preValue + item.count * item.prace
                 }, 0)}
             </div>
           </div>
         )
       }
     }
     const root = ReactDOM.createRoot(document.getElementById("root"))
     root.render(<App />)
   </script>
 </body>

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
table {
  border: 1px solid #ccc;
}
thead {
  background-color: #ccc;
}
td {
  padding: 10px;
}
span {
  padding: 0px 10px;
}