Question

我有以下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，似乎在工作实例中正在使用对函数的引用，而在非工作实例中，函数实际上正在执行...或类似的东西：返回的错误消息是：

无法调用方法＆＃39; onChange＆＃39;未定义的。

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

编辑：我尝试过使用部分应用程序，但仍然不在那里。我已更新onChange例程以获取从节点返回密钥的函数

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);
     }
   });
 }

希望这有帮助。

包装JavaScript函数参考

1 个答案: