获取React中单击元素的值[重复]答案

【问题标题】：Get value of clicked element in React [duplicate]获取React中单击元素的值[重复]
【发布时间】：2020-07-28 14:20:12
【问题描述】：

如何获取被点击元素的值？ event.target.value 显示undefined。

import React from "react";

class Home extends React.Component{
    constructor(){
        super()
        this.state = {
            products: [],
            isLoaded: false,
            value: ""
        }
        this.handleClick = this.handleClick.bind(this);
    }

   componentDidMount(){
       fetch("/home")
        .then(res => res.json())
            .then(result =>{
                        return(
                            this.setState({
                                products: result,
                                isLoaded: true
                            })
                        )


            })
   }

   handleClick(event){
       console.log(event.target) //shows full element
        console.log(event.target.value) //shows undefined    
    }

    render(){
      if(!this.state.isLoaded){
          return(
              <h1>Loading...</h1>
          )
      }
      return <div>{this.state.products.map(elements => 
                <div 
                        key={elements.id} 
                        onClick={this.handleClick}
                        value={elements.name}    
                        >
                        {elements.name}
                </div>
                )}
                <h1>Name: {this.state.value}</h1>
            </div>;
    }
}
export default Home;

【问题讨论】：

嘿，@mirzad，因为event.target 是被点击的<div> <div> 没有价值
所有答案的替代方法是在元素中使用 data-value 属性。然后在事件处理程序中使用event.target.getAtttribute("data-value")。另一种选择是将值作为参数绑定到事件处理程序：onClick={handleClick.bind(this, elements.name)}。如您所见，有很多可能性。

标签： javascript reactjs

【解决方案1】：

divcomponent 没有任何 value 属性，你应该这样做来实现你所需要的：

<div
  key={elements.id}
  onClick={() => this.handleClick(element.name)}
>
  {elements.name}
</div>

【讨论】：

【解决方案2】：

<div> 标签没有值，你需要自己传递value 属性：

<div 
  key={elements.id} 
  onClick={() => this.handleClick(elements.name)} // Pass as parameter
  value={elements.name} // Can be removed if there's no other purpose
  >
  {elements.name}
</div>

并在函数中：

handleClick(value){
   console.log(value) // this is the value
}

【讨论】：

value={elements.name} 不需要。
也许不是为了点击它，但它仍然可以用作道具。把它放在那里没有害处。