reactjs 如何将具有选定产品属性和选定属性价格的产品添加到购物车？

k5ifujac 于 2023-02-08 发布在 React

关注(0)|答案(1)|浏览(135)

我正在与Laravel和惯性React在前端的一个项目，我试图添加一个产品的属性。当我添加一个简单的产品没有属性，它被添加到购物车没有任何问题，但当产品有属性，我无法计算我如何可以添加选定的属性，并根据选定的属性更改价格。
我的表单提交函数看起来像这样：

const [values, setValues] = useState({
  qty: 1,
  productID: product.id,
  price: "",
  attributes: [],
});

function handleChange(e) {
  const key = e.target.id;
  const value = e.target.value;
  setValues((values) => ({
    ...values,
    [key]: value,
  }));
}

function handleSubmit(e) {
  e.preventDefault();
  Inertia.post(route("tenant.cart.add_to_cart"), values);
}

包含选择属性和数量输入的表单如下所示：

<form onSubmit={handleSubmit}>
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    {attributes.map((attribute, index) => (
      <>
        {product.attributes
          .map((s) => s.attribute_id)
          .includes(attribute.id) && (
          <div key={index}>
            <select
              id="attributes"
              onChange={handleChange}
              className="w-full cursor-default bg-white border border-gray-300 py-2.5 pl-3 pr-10 text-left focus:outline-none sm:text-sm"
              required
            >
              <option data-price="0" value="">
                Select {attribute.name}
              </option>

              {product.attributes.map((pattr, index) => (
                <>
                  {pattr.attribute_id === attribute.id && (
                    <option
                      className="relative cursor-default select-none py-2 pl-10 pr-4"
                      key={index}
                      value={pattr.value}
                      data-price={pattr.price}
                    >
                      {pattr.value}
                    </option>
                  )}
                </>
              ))}
            </select>
          </div>
        )}
      </>
    ))}
  </div>
</form>

我试图通过使用事件数据集获取数据价格属性来获取价格，但它返回未定义，我不知道如何实现将addind添加到带有属性的购物车。

reactjs

来源：https://stackoverflow.com/questions/75351464/how-to-add-product-to-cart-with-selected-product-attributes-and-selected-attribu

1条答案

按热度按时间

3wabscal1#

比如我克隆了你项目的一部分，因为你没有把所有的代码都分享给我们，我已经检查了属性值，根据下面的例子我看不出有什么问题，我想，你的问题和你的条件或者状态值有关，如果你想检查这个例子，你可以用this link来达到这个例子，也许你检查的时候，它对解决您问题非常有用。

import { useState, useEffect } from "react";

export default function App() {
  const [values, setValues] = useState({
    qty: 1,
    productID: 1,
    price: "",
    attributes: []
  });

  function handleChange(e) {
    const key = e.target.id;
    const value = e.target.value;
    setValues((values) => ({
      ...values,
      [key]: value
    }));
  }

  useEffect(() => {
    console.log(values);
  }, [values]);

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <select
            id="attributes"
            onChange={handleChange}
            className="w-full cursor-default bg-white border border-gray-300 py-2.5 pl-3 pr-10 text-left focus:outline-none sm:text-sm"
            required
          >
            <option data-price="0" value="">
              Select
            </option>
            <option
              className="relative cursor-default select-none py-2 pl-10 pr-4"
              value="13"
              data-price="13"
            >
              13
            </option>
          </select>
        </div>
      </div>
    </form>
  );
}

赞(0）回复(0）举报 2023-02-08

我来回答

reactjs 如何将具有选定产品属性和选定属性价格的产品添加到购物车？

1条答案

相关问题

热门标签

最新问答