I like to send the attribute properties/props/state values from child ponent to parent ponent on an event fire onDrag. I could not find proper documentation on this.

Here is my code:

/*** @jsx React.DOM */
var APP=React.createClass({
  getInitialState:function()
  {
     return {url:''}
  },
  handleDrag:function(vidurl)
  {
    alert(vidurl);    //i need to get child ponent url here.
  },
  render:function(){
    return  <div>
               <VideoFrame  src={this.state.url} />
               <hr/>
           <videos handle={this.handleDrag(vidurl)} />
        </div>
  }
});

var VideoFrame=React.createClass({
  render:function(){
    return  <div>
          <iframe width="420" height="315"  src={this.props.src}>
          </iframe>     
        </div>
  }
});

var videos=React.createClass({
  getInitialState:function()
  {
    return {vidurl:''}
  },
  render:function()
  {
    return  <img src=".PNG" onDrag={this.props.handle.bind(this.state.vidurl)}></img> //trying to send state value from here
  }
});

React.renderComponent(<APP />, document.body);      

I hope my code is clear.

I like to send the attribute properties/props/state values from child ponent to parent ponent on an event fire onDrag. I could not find proper documentation on this.

Here is my code:

/*** @jsx React.DOM */
var APP=React.createClass({
  getInitialState:function()
  {
     return {url:'http://www.youtube./embed/XGSy3_Czz8k'}
  },
  handleDrag:function(vidurl)
  {
    alert(vidurl);    //i need to get child ponent url here.
  },
  render:function(){
    return  <div>
               <VideoFrame  src={this.state.url} />
               <hr/>
           <videos handle={this.handleDrag(vidurl)} />
        </div>
  }
});

var VideoFrame=React.createClass({
  render:function(){
    return  <div>
          <iframe width="420" height="315"  src={this.props.src}>
          </iframe>     
        </div>
  }
});

var videos=React.createClass({
  getInitialState:function()
  {
    return {vidurl:'http://www.youtube./embed/XGSy3_Czz8k'}
  },
  render:function()
  {
    return  <img src="http://upload.wikimedia/wikipedia/en/a/a6/Size_Small.PNG" onDrag={this.props.handle.bind(this.state.vidurl)}></img> //trying to send state value from here
  }
});

React.renderComponent(<APP />, document.body);      

I hope my code is clear.

• javascript
• reactjs
• reactjs-native

• can you reproduce this problem in jsfiddle? – Just code Commented Mar 18, 2015 at 12:35
• This code would be much clearer to read it it used consistent indentation. – Douglas Commented Mar 18, 2015 at 13:18
• stackoverflow./questions/35649635/… – Khurram Ijaz Commented Feb 26, 2016 at 11:48

2 Answers 2

In App ponent this line

<videos handle={this.handleDrag(vidurl)} />

is not correct, one should pass the function callback instead of invoke a function.

In VideoForm this line

return  <img src="http://upload.wikimedia/wikipedia/en/a/a6/Size_Small.PNG" onDrag={this.props.handle.bind(this.state.vidurl)}></img> //trying to send state value from here

is not correct, this.props.handle is the parent callback, one should just just call this.props.handle(this.state.videoUrl)

Correct Implementation:

var APP = React.createClass({
  getInitialState:function() {
   return {url:'http://www.youtube./embed/XGSy3_Czz8k'}
  },

  // Parent callback, pass this function to the child ponent
  handleDrag:function(videoUrl) {
    alert(videoUrl);
  },

  render: function() {
    return  (
      <div>
         <Videos handle={this.handleDrag} />
      </div>
    );
})


var Videos = React.createClass({

  getInitialState:function()
  {
    return {vidurl:'http://www.youtube./embed/XGSy3_Czz8k'}
  },

  handleChanged: function(event) {
    if(this.props.handle) {
      this.props.handle(this.state.videoUrl);
    }
  },

  render:function()
  {
    return  <img src="http://upload.wikimedia/wikipedia/en/a/a6/Size_Small.PNG" onDrag={this.handleChanged}></img> //trying to send state value from here
  }
});

The first argument to bind is the object to set as "this" when the bound method is called, the second argument to bind is the first argument passed in.

Make sure to pass functions around too, in the first class you are calling handleDrag then passing the return value into the videos ponent rather than passing in handleDrag itself.