仅更改特定卡片组件的状态

Question

我有一个名为“itemQty”的状态，我希望它在按下加号按钮时增加，在按下减号按钮时减少。但是，现在当我按下按钮时，页面中每张卡片的状态都会发生变化。我只有一个它可以在按钮所在的卡中进行更改。我知道我必须使用映射的键。但我不知道该怎么做。有人能帮我吗？这是我的数量将更改为相同的地方。 [![在此处输入图片描述][1]][1]

这是我的默认设置为 1 的状态。但是当我按下第一张卡上的加号按钮时，两个数量都变为 2。

constructor(props) {
    super(props);
    this.state = {
      itemQty: 1,
    };
  }

这是我的产品映射：

 <CardGroup>
                {this.props.restProducts.map((product, key) => {
                  if (
                    product.owner == hawker.owner &&
                    product.published == true
                  )
                    return (
                      <Col md={4}>
                        <Card style={{ marginTop: 15 }}>
                          <Card.Img
                            style={{
                              width: 150,
                              height: 150,
                              alignSelf: "center",
                            }}
                            variant="top"
                            src={
                              "https://ipfs.infura.io/ipfs/" + product.imageHash
                            }
                          />
                          <Card.Body>
                            <Card.Title>{product.name}</Card.Title>
                            <Card.Text>
                              {" "}
                              {window.web3.utils.fromWei(
                                product.price.toString(),
                                "Ether"
                              )}{" "}
                              Eth
                            </Card.Text>
                          </Card.Body>

这是我为按钮图标添加 onclick 事件的地方：

  <FaMinusSquare
                              size="25"
                              onClick={(event) => {
                                console.log("Clicked Minus");
                                this.setState({
                                  itemQty: this.state.itemQty - 1,
                                });
                              }}
                              style={{ cursor: "pointer", marginRight: 5 }}
                            />
                            {this.state.itemQty}
                            <FaPlusSquare
                              size="25"
                              onClick={(key) => {
                                console.log("Clicked Plus");
                                this.setState({
                                  itemQty: this.state.itemQty + 1,
                                });
                              }}
                              style={{ cursor: "pointer", marginLeft: 5 }}
                            />

Answer 1

所以有 2 个选项可以做你想做的事：

使每个卡片项目成为具有自己状态的组件，其中将包括数量并在单个项目级别更改它

class ListItem extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
       qnt: 0
    }
  }
  
  changeQntAdd() {
    this.setState({ qnt: this.state.qnt + 1 })
  }
  
  changeQntRemove() {
    this.setState({ qnt: this.state.qnt - 1 })
  }
  
  const product = props.product;
  return (
    <li>
      {product.name}
      <button onClick={changeQntAdd})>Add one</button>
      <button onClick={changeQntRemove})>Remove one</button>
    </li>
  );
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props)
  }
  
  return (
    <div>
      {this.props.products.map(product => <ListItem product={product} />)}
    </div>
  );
}

保持项目数量的全局状态，如：this.state = { cards: [{id: 1, qnt: 1}, {id: 2, qnt: 12}] }，并更改全局状态。

选项 2 很可能是您想要的方式。

仅更改特定卡片组件的状态

Only change the state for the particular card component

javascript

mapping

state

reactjs