Реагировать на обработчики событий: Попытка обновить номер корзины 'onChange' значением по умолчанию - PullRequest
Новая
       49

Реагировать на обработчики событий: Попытка обновить номер корзины 'onChange' значением по умолчанию

0 голосов
/ 09 февраля 2019

У меня проблемы с правильной структуризацией логики.

У меня есть два обработчика событий: - onChange для получения QQ (selectedQty) в теге <select>.- onClick для отправки productID и кол-во в компонент каталога (как json) (родительский компонент компонента продукта)

ВЫПУСК : я могу отправить кол-во и productID только когда выбран qty, он не отправляет значение по умолчанию selectedQty из 1 в компонент каталога (отправляет неопределенное значение) (потому что способ, которым мой код структурирован, должен вызывать обработчик события onChange для выбора qty.

Вопрос: Как отправить количество по умолчанию 1 без необходимости его выбора пользователем (и, следовательно, без необходимости запуска обработчика onItemQtySelected?

Product.jsx 

import React, { Component } from "react";
import Stock from "../modules/stock";

class Product extends Component {
  state = {
    itemsToSendToCart: {}
  };
  componentDidMount() {}

  onItemQtySelected = event => {
    var select = event.target;
    var selectedOption = select.options[select.selectedIndex];

    const productID = selectedOption.getAttribute("name");

    let selectedQty = event.target.value;

    console.log("selected qty...", selectedQty);

    const itemToCart = this.state.itemsToSendToCart;

    itemToCart.productID = productID;
    if (selectedQty !== 1 || selectedQty < 0) {
      selectedQty = 1;
    }
    itemToCart.selectedQty = selectedQty;

    this.setState({ itemsAddedToCart: itemToCart });
  };
  renderQtyElement() {
    const { productQtyInStock } = this.props;
    let arrayOfOptions = [];
    let count = 1;
    while (count <= productQtyInStock) {
      arrayOfOptions.push(count);
      count++;
    }
    return arrayOfOptions;
  }

  render() {
    const {
      productID,
      productName,
      productPrice,
      productDesc,
      productCategory
    } = this.props;

    // Get the items selected to cart properties and send when add to cart event is clicked
    const itemsInCart = this.state.itemsToSendToCart;

    return (
      <React.Fragment>
        <p>{this.state.productId}</p>
        <div key={productID} className="card" style={{ marginRight: 0 }}>
          <img
            className="card-img-top"
            src="https://sc01.alicdn.com/kf/UT8f0GFXOJbXXagOFbXG/Soccer-Balls-Pakistan.jpg"
            alt="Card image cap"
          />
          <div className="card-body">
            <h5 className="card-title">Name: {productName}</h5>
            <p className="card-text">Description: {productDesc}</p>
            <p className="card-text">Price: {productPrice}</p>
            <p className="card-text">
              <label>Qty:</label>
              <select onChange={this.onItemQtySelected}> <----
                {this.renderQtyElement().map(qty => (
                  <option key={qty} name={productID}>
                    {qty}
                  </option>
                ))}
              </select>
            </p>
            <p className="card-text">Category: {productCategory}</p>
            <button
              href="#"
              // send to cart component via params? instead of catalogue
              onClick={() => this.props.onAddToCart(itemsInCart)} <-----
              className="btn btn-primary"
            >
              Add To Cart
            </button>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Product;

catalogue.jsx 

import React, { Component } from "react";
import Stock from "../modules/stock";
import Product from "./product";

class Catalogue extends Component {
  state = {
    items: [],
    itemsForCart: []
  };

  async componentDidMount() {
    const inventory = await Stock.initStock();
    if (inventory) {
      const items = inventory.map(item => item);

      this.setState({ items });
      console.log(" state >>", this.state.items);
    }
  }

  handleAddToCart = ({ productID, productQty }) => {
    // if (productQty <= 0 && productQty !== 1) return (productQty = 1);
    let item = { productID, productQty };
    let updatedItemsForCart = [];

    let totalItems = this.state.itemsForCart;
    // add previous items in the updated state property
    // totalItems.map(existingItems => updatedItemsForCart.push(existingItems));
    // add the newest item added to cart
    if (item.productQty <= 0) item.productQty = 1;
    updatedItemsForCart.push(...totalItems, item);
    // set state
    this.setState({ itemsForCart: updatedItemsForCart });
  };

  render() {
    console.log("items In cart", this.state.itemsForCart);
    // console.log("updated cart length", h);

    return (
      <React.Fragment>
        <h1>Catalogue...</h1>
        <div>
          {this.state.items.map(item => (
            <Product
              key={item.productID}
              productID={item.productID}
              productName={item.productName}
              productPrice={item.productPrice}
              productQtyInStock={item.productQty}
              productDesc={item.productDesc}
              productCategory={item.productCategory}
              onAddToCart={this.handleAddToCart}
            />
          ))}
        </div>
      </React.Fragment>
    );
  }
}

export default Catalogue;

1 Ответ

0 голосов
/ 09 февраля 2019

Попробуйте добавить значение при инициализации состояния. 

constructor(props) {
    super(props);
    this.state = {
        itemsToSendToCart: {},
        itemsAddedToCart: { selectedQty: 1 }
    };
}
...