我如何在 React 上創建動態產品變體選項

Question

我正在創建一個電子商務項目來學習 React，我想這是通過復雜項目學習語言的最佳方式，這樣您就可以了解它的各個方面。 但現在我被我到處尋找但找不到的東西困住了。

基本上我想創建一個部分，人們可以在其中添加顏色和尺寸等產品變體，如下例所示

它不必很復雜，但如果我可以根據用戶輸入的值添加到 object 中，這就是我所需要的。

如果有人可以幫助我，那就太好了！ 謝謝！！！

Answer 1

我想我做過類似的項目。

流程如下：

const [words, setWords] = useState([]);

...

function handleWord(e) {
    if (e.key === "Enter") {
      let temp = words ? words : [];
      temp.push(value);
      setWords(temp);
      setValue("");
    }
  }

...

<input
          type="text"
          onChange={(e) => setValue(e.target.value)}
          onKeyDown={handleWord}
          value={value}
          placeholder="Enter one keyword..."
/>

您可以根據構建 object 的方式來修改它。

那是你要的嗎？

Answer 2

在目錄中添加產品變體

• 產品的變體是具有不同屬性的產品。

執行

• 要實現此功能，您需要三樣東西

1. 你需要知道所有獨特的鉸鏈及其優先級（目錄中產品的所有獨特可能屬性的集合）例如，在你這里，案例鉸鏈是

[{id:110, hingeName : "Color", priority: 1 }, {id:220, hingeName: "Size", priority:2}]

2. 您需要知道屏幕上當前產品的屬性

productData = { 
    id:12132, 
    prodcutImg:'https://abc.img.in', 
    productPrice:'$24', 
    prodAttribute:[{id:110, value:'Black'},{id:220, value:"XL"}],
    variantMeta:
     {
        hinges:[
                  {id:110, hingeName : "Color", priority: 1 }, 
                  {id:220, hingeName: "Size", priority:2}
              ],
        hingesValues: [ 
                       {110: ["Black","Red","White"]},                                   
                       {220: ['XS','S','L','XL','XXL']}
                      ],
        variantsOfCurrentProducts: [
                                     {variant_id:'12131', attributes: { 110:'Black',220:'S'}},
                                     {variant_id:'12132', attributes: { 110:'Red',220:'XL'}},
                                     {variant_id:'12133', attributes: { 110:'White',220:'XS'}},
                                     {variant_id:'12134', attributes: { 110:'Red',220:'XL'}}
                                    ]
      }
}]

• 現在您需要將所有鉸鏈渲染為標題，將鉸鏈值渲染為這些鉸鏈的值。
• 假設您想按優先級升序呈現變體
• 所以現在給定示例的 UI 將類似於以下內容：

Color :
        Red Black White
Size :
        XS S L XL XXL

• 現在您應該將鉸鏈中選擇的當前產品屬性顯示為

Color :
        Red "Black" White
Size :
        XS S L "XL" XXL

注意：我使用“double_quote”來顯示當前產品的屬性。 您可以在 UI 上使用不同的背景和顏色渲染它。

• 現在確保始終啟用最高優先級的鉸鏈，以便用戶可以在任何時間點使用 select

• 如果有人單擊具有第二高優先級的鉸鏈，則過濾所有具有最高優先級和第二高優先級屬性的變體，並將它們呈現為可選值，所有不具有這些屬性的變體將禁用它們。