Question

因此，基本上，我刚刚开始学习React，我想创建一个简单的add，它可以用作购物车。我只是想知道如何将项目的价格传递给功能。我在下面做了类似的事情，但是它不起作用，可能不是最好的主意。

 <div className="item" onClick={this.addItem} itemPrice={12}><p class="itemDesc">Pizza</p></div>

   addItem() {
     let myItems = this.state.itemsOrdered;
     let myPrice = this.state.price;

     this.setState({
       itemsOrdered: myItems + 1,
       price: myPrice + this.itemPrice
     });
   }

我希望状态价格会随着点击商品的价值而增加

Answer 1

您首先需要修复以下错误：

将驼峰式itemPrice更改为小写itemprice，因为React不允许自定义驼峰式格式   属性。



class是JavaScript中的保留关键字。将<p class="itemDesc">替换为<p className="itemDesc">。

因此，要访问单击的元素的itemprice值并将其添加到state属性，您需要：

首先，将点击的事件对象作为参数传递给addItem()，如下所示：

addItem(e) {

}

第二，将刚刚单击的div分配给变量clickObj，如下所示：

addItem(e) {
    let clickObj = e.currentTarget;
}

第三，使用itemprice方法检索getAttribute属性的值，将其解析为整数，然后将其分配给另一个变量，例如{{1} }。

newPrice

第四，将addItem(e) { let clickObj = e.currentTarget; let newPrice = parseInt(clickObj.getAttribute('itemprice')); }和this.state.price的值相加，然后将其分配给newPrice，如下所示：

this.state.price

检查下面的代码笔，看看我如何使用以上方法在点击时增加状态属性的值：

代码笔： https://codepen.io/andrewl64/pen/wRdvqP

在不同的函数中获取div的属性值（REACT）

1 个答案: