Javascript 如何获取html标记'；反应的价值是什么？

我目前正在使用React开发价格标签的功能。这些组件的主要功能是让用户将这些类中的一个添加到购物车中？ 我的示例代码是

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

从“React”导入React；
从“react dom”导入react dom；
类ProductPage扩展了React.Component{
让数据={
甲级:60,，
B类：70，
C类：80
};
render（）{
返回(
)
}
}
类PriceTab扩展了React.Component{
构造函数（）{
超级（）
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
让dom=ReactDOM.findDomNode（this.refs.priceA）；
console.log（dom.value）//未定义。
}
render（）{
返回（）

{this.props.priceData.classA}
退房


{this.props.priceData.classB}
退房


{this.props.priceData.classC}
退房

}
}
ReactDOM.Render（，document.getElementById（'app'））；

还有什么方法可以绑定一个按钮事件来检测所有的值？

---

非常感谢您的帮助。

您无法直接从

li

元素获取值，因为

值

属性仅限于

输入

字段。您可以做的是将handleClick函数与值绑定

class PriceTab extends React.Component{
    constructor(){
       super()
     this.handleClick = this.handleClick.bind(this);
     }
    handleClick(value, event){
       console.log(value)   //here you will get the value of the li element
     }
    render(){
        return()
               <div>
               <ul>
                    <li ref="priceA">{this.props.priceData.classA}</li>
                    <li><button onClick={this.handleClick.bind(this, this.props.priceData.classA)}>Check Out</li>
               </ul>
               <ul>
                    <li ref="priceB">{this.props.priceData.classB}</li>
                    <li><button onClick={this.handleClick.bind(this, this.props.priceData.classB)}>Check Out</li>
               </ul>
               <ul>
                    <li ref="priceC">{this.props.priceData.classC}</li>
                    <li><button onClick={this.handleClick.bind(this, this.props.priceData.classC)}>Check Out</li>
               </ul>
               </div>
       }
    }

class PriceTab扩展了React.Component{
构造函数（）{
超级（）
this.handleClick=this.handleClick.bind（this）；
}
handleClick（值、事件）{
log（value）//这里您将获得li元素的值
}
render（）{
返回（）

{this.props.priceData.classA}
退房


{this.props.priceData.classB}
退房


{this.props.priceData.classC}
退房

}
}

priceA不是一个输入字段，因此您无法获取li元素的值。多亏了这一点，我为每个按钮设置了ID，然后将handleClick设置为：handleClick（value，event）{let btnId=event.target.ID；//do things……。}然后该函数可以确定哪个按钮调用了该函数。