JavaScript Function Wrapping

Question

I have the following JavaScript code that works as expected ...

/** @jsx React.DOM */

var TreeView = React.createClass({
  render: function() {    
  return <div ref="treeview"></div>;  
  },
 componentDidMount: function() {
   console.log(this.props.onChange);
   var tree = $(this.refs.treeview.getDOMNode()).kendoTreeView({
     dataSource: ...,
     dataTextField: "Name",
     select: this.props.onChange
     }
   });
 }
});

var MyApp = React.createClass({   
  onChange: function(e) {    
    console.log(e);
    this.setState({key: e});
  },
  render: function() {
    return (
      <div>
        <TreeView onChange={this.onChange}/>  
        <GridView />         
      </div>
    );
  }
});

However, in the kendo tree tree, when a node tree is selected, the entire node is transferred. To get the base key, I need to process the node as follows:

select: function(e) { 
  var id = this.dataItem(e.node).id;
  this.props.onChange(id);
}

However, I obviously didn’t quite understand it correctly, and here, please excuse my nubiness, it seems that in the working instance the function reference is used, while in the non-working instance the function is actually Running ... Or something like this: return error message:

Unable to call the 'onChange' method from undefined.

, , , onChange? : , onChange MyApp, .

EDIT: , . onChange, , node

onChange: function(getKey, e) {      
  this.setState({Key: getKey(e)});
},

, .

Answer 1

. , , select, , . , this ( , React). , , onChange :

componentDidMount: function() {
   var onChange = this.props.onChange;
   var tree = $(this.refs.treeview.getDOMNode()).kendoTreeView({
     dataSource: ...,
     dataTextField: "Name",
     select: function(e) { 
       var id = this.dataItem(e.node).id;
       onChange(id);
     }
   });
 }

, .