Is there a way to retrieve the value of the data-custom attribute when the red square is clicked without having to add the same attribute to nested elements? This can become cumbersome if there are multiple levels of nesting.
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>