ReactJs: Versuch, Wert eines ausgewählten Menüs zu erhalten, wenn die Schaltfläche geklickt wird

Question

Ich versuche herauszufinden, wie für jedes Element gerendert, in diesem Element möchte ich den Wert des Auswahlmenüs erhalten, wenn ich auf die Schaltfläche klicken. Ich habe versucht, eine Variable im Render zu erstellen, aber sie ist an alle gerenderten Objekte gebunden.

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

});

Exportstandardprodukte

Answer 1

Sie können ausgewählte ID speichern (oder scu in Ihrem Beispiel) in onChange auf select

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

Und es aus der Liste auf die Schaltfläche erhalten klicken

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