толкать элементы, выделенные в один объект - PullRequest
0 голосов
/ 12 сентября 2018

У меня есть компонент с именем "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>

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Лучший способ поместить элементы в массив состояний в React. Вы можете сделать это

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

Также не используйте несколько setStates внутри функции обработчика, используйте тот, который достаточно:)

0 голосов
/ 12 сентября 2018

Вопрос, который вы задали, немного неясен. Но, насколько я понимаю, может быть 2 вопроса:

  1. Измените const quantities = [...this.state.quantities]; на let quantities = [...this.state.quantities];, так как вы будете помещать новые значения в массив.
  2. let qua = e.target.textContent; не уверен, что это лучший способ получить значение. Попробуйте let qua = e.target.value; и передайте значение параметра в теге привязки <a onClick={this.targetValue} value={i+1} key={i} href="#">{i + 1}</a>

Совместное использование результатов, которые вы пробовали, определенно поможет лучше понять.

...