如何通过道具实现组件中增加和减少按钮的功能

如何解决如何通过道具实现组件中增加和减少按钮的功能

请帮助我解决我的问题。我需要你的帮助

我必须执行增加和减少按钮才能更改数字。 但是我不知道如何更改该功能并将其显示在屏幕上。 这是我的CartItem组件，它将包含名称为Quantity

的增加和减少按钮功能

import React from "react"
import { Image,Row,Col } from "react-bootstrap"
import PropTypes from "prop-types";
import "../CartItem/index.css"
import Quantity from "../Quantity/index"

const CartItem = ({ image,name,price,onDeleteCartItem }) => {

  handleClickDecrease = () => {
    this.setState({
      quantity: this.state.quantity - 1,});
  };

  handleClickIncrease = () => {
    this.setState({
      quantity: this.state.quantity + 1,});
  };


  return (
    <Row className="cart">
      <Col className="cart-image">
        <Image className="image" src={image} alt={name} />
      </Col>
      <Col className="cart-name" as="h4">{name}</Col>
      <Col className="cart-quantity">
        <Quantity onIncrease={this.handleClickIncrease} onDecrease={this.handleClickDecrease} />
      </Col>
      <Col className="cart-price" as="span">{price} VNĐ</Col>
      <Col className="cart-delete" as="span" onClick={onDeleteCartItem}>&#9747;</Col>
    </Row>
  );
}

CartItem.propTypes = {
  image: PropTypes.string,name: PropTypes.string,price: PropTypes.string,onDeleteCartItem: PropTypes.func,};

CartItem.defaultProps = {
  image: "",name: "",price: "",onDeleteCartItem: () => { },};

export default CartItem;

这是我的Quantity.js文件。我在哪里为此编写UI并设置道具

import React from "react";
import { Col,Row } from "react-bootstrap";
import PropTypes from "prop-types";
import Button from "../Button/index"
import "../Quantity/index.css";

const Quantity = ({ quantity,onIncrease,onDecrease }) => {
  return (
    <Row className="quantity p-0">
      <Col className="quantity-item p-0">
        <Button size="btn-sm" btnText="&minus;" onClick={onDecrease}></Button>
      </Col>

      <Col className="quantity-item p-0 result" as="span">{quantity}</Col>

      <Col className="quantity-item p-0">
        <Button size="btn-sm" btnText="&#43;" onClick={onIncrease}></Button>
      </Col>
    </Row>
  );
}

Quantity.propTypes = {
  quantity: PropTypes.number,onIncrease: PropTypes.func,onDecrease: PropTypes.func,};

Quantity.defaultProps = {
  quantity: 1,onIncrease: () => { },onDecrease: () => { },};

export default Quantity;

这是该用户界面

我想在CartItem.js组件中更改该数字，我该怎么做。我对此节不了解并清除。

请问有人可以帮我吗？我真的谢谢你

解决方法

您没有将任何内容传递给“数量”组件。 每个CartItem组件都应跟踪其自身的数量作为状态。.这样，您便将其传递给一个函数，以将其更新为数量组件的道具。单击“数量”组件的“增加”，然后应更新CartItem的状态...这又应捍卫“数量”组件以反映状态变化。

,

使用函数根据最后一个状态设置状态

代替对象

this.setState({ quantity: this.state.quantity - 1 });

传递一个函数，该函数将最后一个状态作为第一个参数。

this.setState(({ quantity }) => ({ quantity: quantity - 1 }));