我怎样才能在 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>
       }
    }

我怎样才能在 React 上获得 html 标签的值？

How can I get a html tag's value on React?

javascript

html

reactjs

dom

refs