ReactJs：試圖單擊時按鈕

我試圖找出如何爲每個項目呈現，該項目裏面我想選擇菜單的值當我點擊此按鈕，獲得一個選擇菜單的值。我試着在渲染內部創建一個變量，但它綁定到所有呈現的項目。ReactJs：試圖單擊時按鈕

export const products = React.createClass({ 
getInitialState() { 
    return { 
     prods: [ 
      { 
       "name": "T-Shirt", 
       "image_full": "550.jpeg", 
       "image_thumb": "415.jpeg", 
       "options": [ 
        { 
         "sku": "TGT-SHIRT-S", 
         "name": "Small", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-M", 
         "name": "Medium", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-L", 
         "name": "Large", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-XL", 
         "name": "X-Large", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-2XL", 
         "name": "2X-Large", 
         "price": 23.95 
        }, 
        { 
         "sku": "TGT-SHIRT-3XL", 
         "name": "3X-Large", 
         "price": 23.95 
        } 
       ] 
      }, 
      { 
       "name": "T-Shirt 2", 
       "image_full": "550.jpeg", 
       "image_thumb": "415.jpeg", 
       "options": [ 
        { 
         "sku": "TGT-SHIRT-S", 
         "name": "Small", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-M", 
         "name": "Medium", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-L", 
         "name": "Large", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-XL", 
         "name": "X-Large", 
         "price": 21.95 
        }, 
        { 
         "sku": "TGT-SHIRT-2XL", 
         "name": "2X-Large", 
         "price": 23.95 
        }, 
        { 
         "sku": "TGT-SHIRT-3XL", 
         "name": "3X-Large", 
         "price": 23.95 
        } 
       ] 
      } 
     ], cart: [] 
    } 
}, 
render() { 
    let prodlist = this.state.prods.map(pp => <div className="col-md-2"> 
     <img src={pp.image_full} alt={pp.title} width="100%" /> 
     <select ref="ppt"> 
      <option value="null" selected>Select Option</option> 
      {pp.options.map(opts => <option value={opts.sku}>{opts.name}</option>)} 
     </select> 
     <button className="btn btn-primary btn-block">ADD TO CART</button> 
    </div> 
    ) 
    return (
     <div> 
      {prodlist} 
     </div> 
    ); 
}

}）;

出口默認產品

來源

2017-02-24 Stellar76

你可以存儲在onChange選擇的ID（或SCU在你的例子）上select

onChange = (e) => { 
    this.setState({selectedScu: e.target.value}); 
}

並從按鈕列表中得到它的點擊

options.find(option => option.scu === this.state.selectedScu)

來源

2017-02-24 15:55:23

如果你這樣做。不會state.selectedSku每個項目是相同的？ – Stellar76

您可以將選定的ID存儲在父組件中 - 通過這種方式，selectedSku將是唯一的 –

ReactJs：試圖單擊時按鈕

回答

相關問題