CODEWITHSUNDEEP
javascriptreactjs
Jan Ciołek
Jan Ciołek

Reputation: 1816

How to retrive attribute value if user clicked on child element?

Can someone tell me how to retrive data-custom attribute value if i click on the red square?I dont want to place the same attribute in child because its getting verbose if i have more&deeper nested elements.

class Example extends React.Component {

  constructor(props){
    super(props)
    
    this.onClick = this.onClick.bind(this)
  }
  
  render(){
  
    return (
    
      <div className="large-box" data-custom="iExist" onClick={this.onClick}>
      
        <div className="box red"></div>
      
      </div>
    
    )
  
  }
  
  onClick(e){
  
    console.log(e.target.getAttribute('data-custom'))
  
  }

}

ReactDOM.render(<Example />,document.getElementById('app'))
.large-box {
  display:flex;
  width:200px;
  height:100px;
  border:1px solid black;

}

.box {
  margin:auto auto;
  width:40px;
  height:40px;

}

.red{background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 0

Views: 467

Answers (2)

totbar
totbar

Reputation: 96

Simple - use event.currentTarget

From: https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred. 

class Example extends React.Component {

  constructor(props){
    super(props)
    
    this.onClick = this.onClick.bind(this)
  }
  
  render(){
  
    return (
    
      <div className="large-box" data-custom="iExist" onClick={this.onClick}>
      
        <div className="box red"></div>
      
      </div>
    
    )
  
  }
  
  onClick(e){
    console.log(e.currentTarget.getAttribute('data-custom'))
  
  }

}

ReactDOM.render(<Example />,document.getElementById('app'))
.large-box {
  display:flex;
  width:200px;
  height:100px;
  border:1px solid black;

}

.box {
  margin:auto auto;
  width:40px;
  height:40px;

}

.red{background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 4

Ved
Ved

Reputation: 12103

Just check for the attribute data-custom using hasAttibute method. If attribute not present than get it from parentNode.

class Example extends React.Component {

  constructor(props){
    super(props)
    
    this.onClick = this.onClick.bind(this)
  }
  
  render(){
  
    return (
    
      <div className="large-box" data-custom="iExist" onClick={this.onClick}>
      
        <div className="box red"></div>
      
      </div>
    
    )
  
  }
  
  onClick(e){
  
    console.log(e.target.hasAttribute('data-custom')?e.target.getAttribute('data-custom'):e.target.parentNode.getAttribute('data-custom'))
  
  }

}

ReactDOM.render(<Example />,document.getElementById('app'))
.large-box {
  display:flex;
  width:200px;
  height:100px;
  border:1px solid black;

}

.box {
  margin:auto auto;
  width:40px;
  height:40px;

}

.red{background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions