У меня есть компонент с именем "itemSelection", а другой - с именем "Item"
в itemSelection. Я просто отображаю через API-ответ, подобный этому
<div className="row">
{this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
</div>
в "Item"Компонент у меня как 3 элемента карты с кнопкой выбора.в его состоянии также есть ключ «количество», но он соответствует количеству, выбранному пользователем определенного элемента.Итак, что я пытаюсь достичь, это то, что если пользователь выбрал один элемент и количество 2, я хочу взять его в объект и поместить этот объект в массив, и если пользователь выбрал другой элемент с количеством 3,Я хочу это в другом объекте и просто помещаю этот объект в массив, в который я поместил первый объект, чтобы он был похож на
[{name: first item, quantity: 2}, {name: second item, quantity: 3}]
, вот что я попробовал
targetValue = (e) => {
e.preventDefault();
let qua = e.target.textContent;
this.setState({quantity: qua, selected: true});
const newQuantity = {name: this.props.name, quantity: qua}
const quantities = [...this.state.quantities];
quantities.push(newQuantity);
this.setState({quantities});
console.log(quantities);
}
Вышеуказанная функция включена в "Item.js", а вот возвращаемая функция
<div className="col-md-4">
<div className={"card " + (this.state.selected ? "frame" : "")} style={{width: 18+'rem'}}>
<img className="card-img-top" style={{width: 10+'rem', margin: 0+' '+'auto'}} src={this.props.img} alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">{this.props.name}</h5>
<p clasNames="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<div className="description">
<p className="card-text">30€</p>
<p className={"card-text " + (this.state.selected ? "" : "displayQua")}>Q: {this.state.quantity}</p>
</div>
<button onClick={this.toggleMenu} href="#" style={{width: 100 + '%', margin: 0+' '+'auto'}} className="btn">SELECT</button>
</div>
</div>
<div className="menu">
<div className={this.state.visible ? "" : "visible"}>
<div className="menu">
{_.times(this.props.quantity, i => (
<a onClick={this.targetValue} key={i} href="#">{i + 1}</a>
))}
</div>
</div>
</div>
</div>