我如何在React上获得html标签的值？ [英] How can I get a html tag's value on React?

问题描述

我目前正在使用React开发价格标签的功能。这些组件的主要功能是让用户将其中一个类的价格添加到购物车中。问题是如何获取HTML标签的html字符串？
我的示例代码是

  import从'react'反应; 
从'react-dom'导入ReactDOM; 
 $ b $ class class ProductPage extends React.Component {
 let Data = {
 classA：60，
 classB：70，$ b $ classC：80 
 }; 
 render（）{
 return（
< PriceTab priceData = {Data} /> 
）
} 
} 
 
 class PriceTab扩展了React.Component {
构造函数（）{
 super（）
 this.handleClick = this.handleClick.bind（this）; 
} 
 handleClick（event）{
 let dom = ReactDOM.findDomNode（this.refs.priceA）; 
 console.log（dom.value）//未定义。 
} 
 render（）{
 return（）
< div> 
< ul> 
< li ref =priceA> {this.props.priceData.classA}< / li> 
< li><按钮onClick = {this.handleClick}>结帐< / li> 
< / ul> 
< ul> 
< li ref =priceB> {this.props.priceData.classB}< / li> 
< li><按钮onClick = {this.handleClick}>结帐< / li> 
< / ul> 
< ul> 
< li ref =priceC> {this.props.priceData.classC}< / li> 
< li><按钮onClick = {this.handleClick}>结帐< / li> 
< / ul> 
< / div> 
 
 
 
 ReactDOM.Render（< ProductPage />，document.getElementById（'app'））; 
  

有没有办法绑定一个检测所有值的按钮事件？
非常感谢您的帮助......

解决方案

您无法直接从 li 元素作为值属性限于输入字段。你可以做的是绑定handleClick函数和值。

  class PriceTab extends React.Component {
 constructor ）{
 super（）
 this.handleClick = this.handleClick.bind（this）; 
} 
 handleClick（value，event）{
 console.log（value）//这里您将获得li元素的值
} 
 render（） {
 return（）
< div> 
< ul> 
< li ref =priceA> {this.props.priceData.classA}< / li> 
< li><按钮onClick = {this.handleClick.bind（this，this.props.priceData.classA）}>检出< / li> 
< / ul> 
< ul> 
< li ref =priceB> {this.props.priceData.classB}< / li> 
< li><按钮onClick = {this.handleClick.bind（this，this.props.priceData.classB）}>检出< / li> 
< / ul> 
< ul> 
< li ref =priceC> {this.props.priceData.classC}< / li> 
< li><按钮onClick = {this.handleClick.bind（this，this.props.priceData.classC）}>检出< / li> 
< / ul> 
< / div> 
} 
} 
  

I'm currently developing a function of the price tab by using React. The main function of these components is to let user add one of these classes price into shopping cart .The problem is how Can I get a HTML tag's html string? my sample code is

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

Also are there any way to bind one button event detecting all of the values ? Many thanks for any help ...

解决方案

You cannot get the value directly from an li element as value attribute is restricted to the input fields. What you can do is bind the handleClick function with the value.

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标签的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！