reactjs 如何更改React中的状态以匹配选定的可配置产品选项？

pftdvrlh 于 2023-01-25 发布在 React

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

如何单独更改选项的状态，以便行为应基于选项，这意味着只能选择一个可配置选项？
使用案例场景：
1.未选择任何内容，验证以选择颜色和大小
1.选择颜色或大小将确认一个未选择的选项。
这就是我想要达到的目标：

Json：

{
  "configurable_options": [
    {
      "__typename": "ConfigurableProductOptions",
      "id": 167,
      "attribute_id": "93",
      "label": "Color",
      "position": 1,
      "use_default": false,
      "attribute_code": "color",
      "values": [
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 50,
          "label": "Blue",
          "swatch_data": {
            "__typename": "ColorSwatchData",
            "value": "#1857f7"
          }
        },
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 53,
          "label": "Green",
          "swatch_data": {
            "__typename": "ColorSwatchData",
            "value": "#53a828"
          }
        },
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 56,
          "label": "Orange",
          "swatch_data": {
            "__typename": "ColorSwatchData",
            "value": "#eb6703"
          }
        }
      ],
      "product_id": 1194
    },
    {
      "__typename": "ConfigurableProductOptions",
      "id": 166,
      "attribute_id": "144",
      "label": "Size",
      "position": 0,
      "use_default": false,
      "attribute_code": "size",
      "values": [
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 166,
          "label": "XS",
          "swatch_data": {
            "__typename": "TextSwatchData",
            "value": "XS"
          }
        },
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 167,
          "label": "S",
          "swatch_data": {
            "__typename": "TextSwatchData",
            "value": "S"
          }
        },
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 168,
          "label": "M",
          "swatch_data": {
            "__typename": "TextSwatchData",
            "value": "M"
          }
        },
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 169,
          "label": "L",
          "swatch_data": {
            "__typename": "TextSwatchData",
            "value": "L"
          }
        },
        {
          "__typename": "ConfigurableProductOptionsValues",
          "value_index": 170,
          "label": "XL",
          "swatch_data": {
            "__typename": "TextSwatchData",
            "value": "XL"
          }
        }
      ],
      "product_id": 1194
    }
  ]
}

x一个一个一个一个x一个一个二个x

reactjs

来源：https://stackoverflow.com/questions/75206316/how-to-change-the-state-in-react-to-match-selected-configurable-product-options

1条答案

按热度按时间

6tdlim6h1#

创建从data.json派生的初始状态对象。
例如{166: null, 167: null}
然后onChange，将产品的value_index设置为selectedProductOptions中configurable_option.id键的选定状态。
例如，单击“橙子”将selectedProductOptions设置为{166: null, 167: 56}

import products from "./data.json";
const initialState = {};

products.configurable_options.forEach(({ id }) => {
  initialState[id] = null;
});

const ProductDetail = () => {
  const [selectedProductOptions, setSelectedProductOptions] = useState(
    initialState
  );

  return (
    <Container maxWidth="sm">
      {products.configurable_options.map((configurable_option) => (
        <div>
          <ToggleButtonGroup
            sx={{ mt: 5 }}
            color="primary"
            onChange={(_event, value) => {
              setSelectedProductOptions({
                ...selectedProductOptions,
                [configurable_option.id]: value[0].value_index
              });
            }}
          >
            {configurable_option.values.map((item, index) => (
              <ToggleButton
                key={index}
                value={item}
                selected={
                  selectedProductOptions[configurable_option.id] ===
                  item.value_index
                }
              >
                {item.label}
              </ToggleButton>
            ))}
          </ToggleButtonGroup>
        </div>
      ))}
    </Container>
  );
};

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs 如何更改React中的状态以匹配选定的可配置产品选项？

1条答案

相关问题

热门标签

最新问答