包装JavaScript函数参考

我有以下JavaScript代码,它按预期工作…

/** @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>
    );
  }
});

但是,使用kendo树视图,在选择树节点时,将传递整个节点.要获取底层密钥,我需要按如下方式处理节点：

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

然而,我显然不是很正确,因为这里请原谅我的noobness,似乎在工作实例中正在使用对函数的引用,而在非工作实例中,函数实际上正在执行. ..或类似的东西：返回的错误消息是：

Cannot call method ‘onChange’ of undefined.

那么在调用onChange方法之前,我需要做什么才能引用提取键的函数？请注意,如果我的理解是正确的,则需要在MyApp类的上下文中执行onChange,以便任何子组件都会收到有关更改的通知.

编辑：我已尝试使用部分应用程序,但仍然不是那里.我已经更新了onChange例程以获取一个从节点返回密钥的函数

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

但我不确定如何连接它.

解决方法:

你的代码看起来大多正确.我相信你唯一的问题是你传递给树视图的select回调是用错误的范围调用的.请注意,您在函数中使用它来表示两个不同的东西(一个用于实际的树视图对象,另一个用于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);
     }
   });
 }

希望这可以帮助.

标签：javascript,reactjs,react-jsx,kendo-treeview
来源： https://codeday.me/bug/20190624/1280705.html