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：试图单击时按钮

回答

相关问题