时间戳

首页 > 解决方案 > 将选定的元素推入一个对象

reactjs - 将选定的元素推入一个对象

问题描述

我有一个名为“itemSelection”的组件和另一个名为“Item”的组件

在 itemSelection 我只是通过这样的 api 响应进行映射

<div className="row">
                {this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
            </div>

在“项目”组件中，我喜欢 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€&lt;/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>

标签： reactjsecmascript-6react-props

解决方案

在 React 中将元素推送到状态数组的最佳方式。你可以这样做

   const newQuantity = {name: this.props.name, quantity: qua};
   this.setState(previousState => ({
       quantities : [...previousState.quantities, newQuantity]
   }));

也不要在处理函数中使用多个 setState 使用一个就足够了:)

推荐阅读