Получение значения атрибута div в другой функции (REACT)
По сути, я только начал изучать 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
});
}
Я ожидаю, что государственная цена увеличится на сумму, по которой кликнули
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Для начала необходимо исправить следующие ошибки:
Change the camel-case
itemPriceto lowercase like thisitempricesince React doesn't allow camel-case format for custom attributes.
classis a reserved keyword in JavaScript. Replace:<p class = "itemDesc">with<p className = "itemDesc">.
Итак, чтобы получить доступ к значению itemprice выбранного элемента и добавить его в свойство состояния, вам необходимо:
Первый, передайте объект события, по которому был осуществлен щелчок, в качестве параметра в 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
Большое спасибо за советы. Это было действительно полезно! :)