2

我目前正在使用 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'));

还有什么方法可以绑定一个按钮事件来检测所有值吗？非常感谢您的帮助...

4

1 回答 1

0

您不能直接从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>
       }
    }
于 2016-11-22T03:28:30.077 回答