ReactJs：ボタンがクリックされたときに選択メニューの値を取得しようとしています

Question

私はボタンをクリックしたときに選択メニューの値を取得したいと思っています。 レンダリング内で変数を作成しようとしましたが、レンダリングされたすべてのアイテムにバインドされています。

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> 
    ); 
} 

}）;

輸出デフォルトの製品

Answer 1

あなたはボタンをselect

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

にonChangeに（あなたの例やSCU）選択されたIDを格納し、リストからそれを得ることができます

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