如何在React上獲取html標籤的值？

Question

我目前正在使用React開發價格標籤的功能。這些組件的主要功能是讓用戶將其中一個類的價格添加到購物車中。問題是如何獲取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')); 

另外是否有任何的方式來一個按鈕事件檢測所有值的結合？ 非常感謝您的幫助......

Answer 1

不能從li元素value屬性直接獲得的價值被限制爲input領域。你可以做的是綁定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> 
     } 
    }