Помогите, пожалуйста, разобраться: в ReactJS у меня есть компонент Food
, который по сути представляет собой товар в корзине интернет-магазина. Есть некая цена и поле input
, в котором уазывается количество единиц данного товара (по умолчанию, стоит "1").
class Food extends React.Component {
constructor() {
super();
this.state = { prop: 1 }
}
render() {
return (
<div>
<div className="count">
<p>Количество</p>
<button onClick={this.less}>-</button>
<input value={this.state.prop} />
<button onClick={this.more}>+</button>
</div>
<div className="price">
<span>{this.props.price}</span>
</div>
</div>
)
}
}
При рендере компонента в this.props.price
указывается стоимость товара:
ReactDOM.render(
<React.StrictMode>
<App />
<Food price="20999" />
</React.StrictMode>,
document.getElementById('root')
);
Как можно реализовать функцию увеличения или уменьшения стоимости товара, при изменении его количества в поле input
?