Reactコンポーネントのdivから値を読み込む方法は？

Question

cartコンストラクタ内の値を動的に設定したいと思います。私のcart変数は価格、アイテムを持っています。サイズの値。どの項目がクリックされたのかを動的にitemに割り当てる必要があります。これは私のコードです：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { addCart } from '../../actions'; 
import { withRouter } from 'react-router'; 
//import { Cart } from './webcart'; 


import CamoHat from './camodye.jpeg'; 
import TonyTape from './TonyTape.png'; 
import RegularHat from './regularhat.jpg'; 
import JaguarShirt from './JAGUARLOGO.png'; 
import SeltzShirt from './seltzshirt.jpg'; 
import NocHoodie from './NOCNOCHOODIE.png'; 

export class WebShop extends Component { 
    constructor(props){ 
     super(props); 
     this.state = {value: 'medium', cartData: {} }; 
     this.handleClick = this.handleClick.bind(this); 
     this.change = this.change.bind(this); 
     this.goProductPage = this.goProductPage.bind(this); 
     this.goProductPage2 = this.goProductPage2.bind(this); 
     this.goProductPage3 = this.goProductPage3.bind(this); 
    } 

    handleClick() { 
     let cart = {price:0,item:"userselection",size:this.state.value}; 
     this.props.onCartAdd(cart); 
     this.itemSelection(cart); 
    } 

    change(e){ 
     this.setState({value: e.target.value}) 
    } 

    itemSelection(cart){ 
     let userItem = cart; 
     let userSelection = cart 
     if (userItem == "shirt1") { 
      let itemPrice = 20.00; 
     } 
    } 
    ... 

    render() { 
     return (
      <div className='Webshop' id='Webshop'> 
       <ul id="Productlist"> 
        <div className='Product'> 
         <img src={CamoHat} onClick={this.goProductPage}></img> 
         <div id='infoname'>NOC NOC HAT (CAMO)</div> 
         <div id='infoprice'>40.00</div> 
        </div> 
        <div className='Product'> 
         <img src={JaguarShirt} onClick={this.goProductPage2}></img> 
         <div id='infoname'>JAGUAR PYRAMIDS T-SHIRT</div> 
         <div id='infoprice'>25.00</div> 
        </div> 
        <div className='Product'> 
         <img src={SeltzShirt} onClick={this.goProductPage3}></img> 
         <div id='infoname'>JAGUAR PYRAMIDS T-SHIRT</div> 
         <div id='infoprice'>25.00</div> 
        </div> 
        <div className='Product'> 
         <img src={NocHoodie} onClick={this.goProductPage}></img> 
         <div id='infoname'>JAGUAR PYRAMIDS T-SHIRT</div> 
         <div id='infoprice'>25.00</div> 
        </div> 
        <div className='Product'> 
         <img src={RegularHat}></img> 
         <button onClick={this.handleClick} className="addit">Add to cart</button> 
         <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
         </select> 
        </div> 
        <div className='Product'> 
         <img src={TonyTape}></img> 
         <button onClick={this.handleClick} className="addit">Add to cart</button> 
         <select id="size" onChange={this.change} value={this.state.value}> 
         <option value="medium">Medium</option> 
         <option value="large">Large</option> 
         <option value="x-large">X-large</option> 
         </select> 
        </div> 
       </ul> 
      </div> 
     ); 
    } 
} 

... 

export default connect(mapStateToProps,mapDispatchToProps)(WebShop); 

私は元のためのアイテムdiv id=infoname（テキスト自体）以内に商品の説明を使用してcartでitem値を割り当てる：NOC NOC Hat。どのように私の機能の中でこれを行うことができますか？それを行うより良い方法はありますか？

Answer 1

あなたがやりたいする最も簡単な方法は、引用文献を使用することです：公式ドキュメントから https://facebook.github.io/react/docs/refs-and-the-dom.html

引用：

ref属性は、コールバック関数を受け取り、コールバックは次のようになります は、コンポーネントのマウントまたはアンマウント直後に実行されます。 ref属性は、HTML要素で使用されて

は

、REFコールバック は、それが私のためにコンパイルされるように、私はあなたのコードからいくつかの行を削除した

引数として基礎となるDOM要素を受け取ります。 ここにある：ライン22と46で https://codesandbox.io/s/314N8jxG9

ルック（にconsole.log出力を確認してください）

REF属性は、このようにそれのinnerHTML値、div要素にアクセスすることができますコールバックを受け取ります。

これは最良の方法ではありませんが、これで問題が解決されます。

---

ここでは、小道具を使用するのが最も良い方法です。

、最初ProductIemにこの方法をお使いの製品の項目を抽出して、あなたのコードをリファクタリングしてください：

const ProductItdem = ({description, price})=>{ 
     return (
       <div className='Product'> 
          <div id='infoname' >{description}</div> 
          <div id='infoprice'>{price}</div> 
         </div> 
     ); 
    } 

あなたもProductListコンポーネントでそれらを構成することができます。 次に、WebShopコンテナコンポーネントからdummコンポーネントにプロップを渡します。

ご質問をお聞かせください。