javascript - 在 React 中获取点击元素的值

Question

如何获取被点击元素的值？ 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;

Answer 1

<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
}