2

Reactを使って価格タブの機能を開発中です。これらのコンポーネントの主な機能は、ユーザーがこれらのクラスの価格の 1 つをショッピング カートに追加できるようにすることです。問題は、HTML タグの html 文字列を取得するにはどうすればよいかということです。私のサンプルコードは

import React from 'react';
import ReactDOM from 'react-dom';

class ProductPage extends React.Component{
  let Data = {
    classA: 60,
    classB: 70,
    classC: 80
  };
  render(){
    return(
     <PriceTab priceData={Data}/>
    )
  }
}

class PriceTab extends React.Component{
    constructor(){
       super()
     this.handleClick = this.handleClick.bind(this);
     }
    handleClick(event){
       let dom = ReactDOM.findDomNode(this.refs.priceA);
       console.log(dom.value)// got undefined.
     }
    render(){
        return()
               <div>
               <ul>
                    <li ref="priceA">{this.props.priceData.classA}</li>
                    <li><button onClick={this.handleClick}>Check Out</li>
               </ul>
               <ul>
                    <li ref="priceB">{this.props.priceData.classB}</li>
                    <li><button onClick={this.handleClick}>Check Out</li>
               </ul>
               <ul>
                    <li ref="priceC">{this.props.priceData.classC}</li>
                    <li><button onClick={this.handleClick}>Check Out</li>
               </ul>
               </div>
       }
}

ReactDOM.Render(<ProductPage/> ,document.getElementById('app'));

また、すべての値を検出する 1 つのボタン イベントをバインドする方法はありますか? 助けてくれてありがとう...

4

1 に答える 1