4

我有以下 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>
    );
  }
});

但是，在剑道树视图中，在选择树节点时，会传递整个节点。要获得底层密钥，我需要按如下方式处理节点：

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

但是，我显然没有完全正确，在这里请原谅我的菜鸟，似乎在工作实例中使用了对该函数的引用，而在非工作实例中，该函数实际上正在执行。 ..或类似的东西：返回的错误消息是：

无法调用未定义的方法“onChange”。

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

编辑：我尝试过使用部分应用程序，但还没有完全到位。我已经更新了onChange例程以获取一个从节点返回密钥的函数

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

但我不确定如何将它全部连接起来。

4

1 回答 1

4

您的代码看起来基本正确。我相信您唯一的问题是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);
     }
   });
 }

希望这可以帮助。

于 2014-01-03T18:35:17.253 回答