import React from "react"; class Main extends React.Component { constructor(props){ super(props); this.state = { divStyle: { width:"1000px", height: "500px", outline: "1px solid red" }, move: { width:"200px", height:"100px", outline: "1px solid green" } } } MouseDown(e){ console.log(this.ourDiv); } render() { return( <div> <div style={this.state.divStyle}> <div style={this.state.move} ref={(ourDiv)=> this.ourDiv = ourDiv} onClick ={this.MouseDown}></div> </div> </div> ) } } export default Main; 
 <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>

    1 answer 1

    Try this:

     <div style={this.state.move} ref={(ourDiv) => { this.ourDiv = ourDiv; }} onClick={() => {this.MouseDown()}}></div>

    or just bind your MouseDown function:

     <div style={this.state.move} ref={(ourDiv) => this.ourDiv = ourDiv} onClick={this.MouseDown.bind(this)}></div>

    Why you could not call ref can read here: https://reactjs.org/docs/handling-events.html

    • Just forgot bind to do - Sinevik