我们需要添加一个计数器，在单击Badge按钮后，它将显示购物车中的商品数量

Question

我们需要添加一个计数器，在单击Badge按钮后，它将显示购物车中的商品数量。告诉我如何通过类组件传递它。我有一个导航栏类组件，它有一个徽章，应该显示有多少产品已添加到购物车，并有一个购物车类，需要传递给导航栏作为道具。告诉我如何通过类组件传递它。

<Badge count={this.state.totalItems}>
<ShoppingCartOutlined />
</Badge>

这里我通过构造函数

给yogo提供信息

class Navbar extends React.Component {
constructor(props){
super(props);
this.state = {
current: "mail",
}
}
handleClick = (e) => {
console.log("click ", e);
this.setState({ current: e.key });
};
render() {

const { t } = this.props;
const { current } = this.state;
return (

<div className="navbar">
<Menu
onClick={this.handleClick}
selectedKeys={[current]}
mode="horizontal"
>
<Menu.Item key="main" icon={<HomeOutlined />}>
{t("menu.home")}
</Menu.Item>
<Menu.Item key="favorites" icon={<HeartOutlined />}>
{t("menu.favorites")}
</Menu.Item>
<Menu.Item key="Faq" icon={<QuestionCircleOutlined />}>
{t("menu.faq")}
</Menu.Item>
</Menu>
<div className="navbar__logo">
CLOTHES
<span>.STORE</span>
</div>
<Menu
onClick={this.handleClick}
selectedKeys={[current]}
mode="horizontal"
className="right-menu"
></Menu>
<div className="button_sign">{t("menu.signup")}</div>
<Badge count={this.state.totalItems}>
<ShoppingCartOutlined />
</Badge>
<div className="navbar_lang">
<SetLanguage />
</div>
</div>
);
}
}
export const Cart = ({ totalItems}) => {
const classes = useStyles();
return (
<>
<AppBar position="fixed" className={classes.appBar} color="inherit">
<div>
<IconButton arial-label="Show cart items" color="inherit">
<Badge badgeContent={totalItems} color="secondary">
<ShoppingCart/>
</Badge>
</IconButton>
</div>
</AppBar>
</>
);
};

Answer 1

如果你想从子组件中修改父组件状态下的totalItems的值，你可以:

• 使用状态管理工具(如:redux)，如果你的应用程序将会变得更大
• 如果是像你这样的简单情况，你可以在父组件中创建一个方法。称为increment，将其作为props传递到子组件然后调用它。它将被绑定并在父组件的上下文中执行。

class Navbar extends React.Component {
constructor(props){
super(props);
this.state = {
current: "mail",
totalItems: 0, // add the total to the state
}
}
// Define increment inside the parent component 
increment = () => {
this.setState({totalItems: totalItems++})
}
render() {

const { t } = this.props;
const { current } = this.state;
return (

// ...
<Badge count={this.state.totalItems}>
<ShoppingCartOutlined count={this.state.totalItems} increment={this.increment} />
</Badge>

// ...
);
}
}

然后，在子组件中，使用click侦听器调用该方法:

export const ShoppingCartOutlined = ({ count, increment }) => {
const classes = useStyles();
return (
<>
<AppBar position="fixed" className={classes.appBar} color="inherit">
<div>
<IconButton arial-label="Show cart items" color="inherit">
<Badge
badgeContent={count}
onClick={increment} // or () => increment()
color="secondary"
>
<ShoppingCart/>
</Badge>
</IconButton>
</div>
</AppBar>
</>
);
};