react购物车的三个组件的分离的头部写法

Posted 干饭吧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react购物车的三个组件的分离的头部写法相关的知识,希望对你有一定的参考价值。

header.js

import React, { Component } from \'react\'
import shoppigcar from "../../css/shoppingcar.module.css";

export default class Header extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            <>
                 <div>
                    <div className={shoppigcar.item}>
                        <input type=\'checkbox\' checked={this.props.ischeckedall} onChange={(e) => {
                            // alert(e.target.checked)
                            this.props.changeCheckedAll(e.target.checked);
                        }} />全选
                    </div>
                    <div className={shoppigcar.item}>商品名称</div>
                    <div className={shoppigcar.item}>商品价格</div>
                    <div className={shoppigcar.item}>商品数量</div>
                    <div className={shoppigcar.item}>商品小计</div>
                    <div className={shoppigcar.item}>操作</div>
                </div>
            </>
        )
    }
}

以上是关于react购物车的三个组件的分离的头部写法的主要内容,如果未能解决你的问题,请参考以下文章

React中父子组件通信

react购物车demo

反应状态和购物车的问题

当 React JS 中的一项值使用地图函数中的状态发生变化时,如何动态更新购物车中的值?

在 React.js 中使用 handleClick 更改布尔值 [重复]

当另一个组件的状态发生变化时如何重新加载组件 React