react实现todolist

最新推荐文章于 2022-05-01 17:41:07 发布

大风起兮云飞扬丶

最新推荐文章于 2022-05-01 17:41:07 发布

阅读量302

点赞数 1

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/weixin_45932565/article/details/104229135

版权

React 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

React之todolist

react实现todolist，也就一个简易的购物车。难点在于子父组件之间的通讯问题。主要通过一个属性值来传递一个函数给子组件执行，通过这个函数达到给父组件传值的目的。还需要注意的是这个函数的执行环境绑定到父组件上。
注意：本篇代码中的onchang并不是事件函数，而是通过onchang传递一个函数给子组件，供子组件传值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <title>购物车</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .btn{
            width:50px;
            height:30px;
            cursor: pointer;
        }
        .count_txt{
            display: inline-block;
            width:40px;
            text-align: center;
        }
        ul li{
            list-style: none;
        }
        .count_box{
            display: inline-block;
        }
        li{
            width:800px;
            padding:10px 0;
        }
        li>span{
            display: inline-block;
            width:200px;
        }
        .shop_box{
            width: 800px;
            margin: 100px auto;
        }
        h1{
            padding-bottom:50px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    
    <script type="text/babel">
        class CountDemo extends React.Component{
            constructor(){
                super();
            }
            handleClick(type){
                if(type=="add"){
                    this.props.onchange([1,this.props.id])
                }else{   
                    this.props.onchange([-1,this.props.id])     
                }
            }
            render(){
                return(
                    <div className="count_box">
                        <button className="btn" onClick={this.handleClick.bind(this,"sub")}>-</button>
                        <span className="count_txt">{this.props.num}</span>
                        <button className="btn" onClick={this.handleClick.bind(this,"add")}>+</button>
                    </div>
                )
            }
        }
        class ListDemo extends React.Component{
            constructor(){
                super();
                this.state={
                    allcount:0,
                }
            }
            render(){
                let {id,name,price,num,total}=this.props.data 
                return(
                        <li>
                            <span>{name}</span>
                            <span>{price}</span>
                            <span><CountDemo id={id} num={num} onchange={val=>{this.props.onchange(val)}}/></span>
                            <span>{total}</span>
                        </li>
                )
            }
        }


        class Shop extends React.Component{
            constructor(){
                super();
                this.state={
                    listdata:[{
                        id:"001",name:"电脑",price:1000,total:0,num:0
                    },{
                        id:"002",name:"鼠标",price:120,total:0,num:0
                    },{
                        id:"003",name:"键盘",price:200,total:0,num:0
                    },{
                        id:"004",name:"U盘",price:50,total:0,num:0
                    }],
                    zongjia:0,
                   
                }
            }   
            handleChange(val){
                this.state.zongjia=0
               this.state.listdata.map(item=>{
                    if(item.id==val[1]){
                        item.num+=val[0]
                        item.total=item.price*item.num 
                    }
                })

                this.state.listdata.map(item=>{
                   this.state.zongjia+=item.total
                })
                 this.setState({})
            }

            render(){
             
                var list=this.state.listdata.map((item)=>{ 
                    return <ListDemo data={item} key={item.id} onchange={val=>{ this.handleChange(val)}}/>
                })
                return(
                    <div className="shop_box">
                    <h1>简易购物车</h1>
                        <ul>
                            <li>
                             <span>商品名称</span>
                             <span>价格</span>   
                             <span>数量</span>   
                             <span>总价</span>   
                        </li>
                            {list}
                        </ul>
                       <h2>总价：{this.state.zongjia}</h2>
                    </div>
                )
            }
        }
        
    ReactDOM.render(
        <div>
            <Shop/>
        </div>,
        document.getElementById('app')
    )
    </script>
</body>
</html>

大风起兮云飞扬丶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react实现todolist

React之todolist        react实现todolist，也就一个简易的购物车。难点在于子父组件之间的通讯问题。主要通过一个属性值来传递一个函数给子组件执行，通过这个函数达到给父组件传值的目的。还需要注意的是这个函数的执行环境绑定到父组件上。    &nbs...
复制链接

扫一扫