Получение значения атрибута div в другой функции (REACT)

Question

Итак, я только начал изучать React и хотел создать простую надстройку, которая бы работала как торговый автомобиль.Мне просто интересно, как передать цену товара в функцию.Я сделал что-то подобное ниже, но это не работает, и, вероятно, это не лучшая идея.

 <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

Сначала необходимо исправить следующие ошибки:

1. Измените регистр верблюда itemPrice на строчные, как это itemprice, поскольку React не разрешает верблюдформат регистра для пользовательских атрибутов.

2. class - зарезервированное ключевое слово в JavaScript.Замените: <p class="itemDesc"> на <p className="itemDesc">.

---

Итак, чтобы получить доступ к значению itemprice выбранного элемента и добавить его к свойству состояния, вам необходимоto:

Первый , передать выбранный объект события в качестве параметра в addItem() следующим образом:

addItem(e) {

}

Второй , назначитьdiv вы только что нажали на переменную, скажем, clickObj вот так:

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

Третий , получить значение атрибута itemprice с помощью метода getAttribute, проанализировать егоцелому числу, а затем назначьте его другой переменной, скажем newPrice.

addItem(e) {
    let clickObj = e.currentTarget;
    let newPrice = parseInt(clickObj.getAttribute('itemprice'));
}

Четвертый , Добавьте значения this.state.price и newPrice и затем присвойте его this.state.price как это:

addItem(e) {
    let clickObj = e.currentTarget;
    let newPrice = parseInt(clickObj.getAttribute('itemprice'));
    this.setState({
        price: this.state.price + newPrice
    });
}

---

Проверьте код ниже, чтобы увидеть, как я использую вышеупомянутый подход для увеличения значения свойства состояния при нажатии:

CodePen: https://codepen.io/andrewl64/pen/wRdvqP