Javascript React JS：使用道具传递我的处理程序函数时出现问题

我有三节课。在第一个例子中，我声明了一个处理函数（handleItemClick）。我想把这个函数传递给最后一个类，一个可单击的列表项

头等舱：

module.exports = React.createClass({

...

    renderList: function() {
      return <SortableList topics={this.state.topics} whenItemClicked={this.handleItemClick} seminar={this.state.seminar} />
    },
  /* THE FUNCTION WHICH SHOULD BE INVOKED IN THE LIST ITEM */
    handleItemClick: function(type, item) {
        /** handle click **/
    },

...
});

module.exports=React.createClass({
...
renderList:function（）{
返回
},
/*应在列表项中调用的函数*/
handleItemClick：功能（类型、项目）{
/**手柄点击**/
},
...
});

第二个是列表，创建列表项。这个类应该从第一个类获取处理函数并将其传递给第三个类

sortable-list.jsx：

var React = require('react');
var Sortable = require('sortablejs');
var SortableMixin = require('sortablejs/react-sortable-mixin');
var ListItem      = require('./list-item');

module.exports = React.createClass({
    mixins: [SortableMixin],

    getInitialState: function() {
        return {
            items : this.props.topics
        };
    },
    handleClick: function(type, item) {
        // invoke whenItemClicked of the previous class
        this.props.whenItemClicked(type, item);
    },
    handleSort: function (/** Event */evt) {
     /**/
    },

    render: function() {
        return <ul className="nav nav-pills nav-stacked mail-nav" style={{marginTop: '0px'}}>{
            this.state.items.map(function (topic) {
                return <ListItem whenItemClicked= {this.handleClick} type={"topic"} item={topic}  key={topic.id}  />                
            })
        }</ul>
    }
});

var React=require（'React'）；
var Sortable=require（'sortablejs'）；
var SortableMixin=require（'sortablejs/react-SortableMixin'）；
var ListItem=需要（“./列表项”）；
module.exports=React.createClass({
mixin:[可排序的mixin]，
getInitialState:函数（）{
返回{
项目：this.props.topics
};
},
handleClick：功能（类型、项目）{
//单击上一个类的时调用
单击时的此.props.（类型、项目）；
},
handleSort:函数（/**Event*/evt）{
/**/
},
render:function（）{
return
{
this.state.items.map（函数（主题）{
返回
})
}
}
});

最后是类list-item.jsx，可以在其中显示单击

var React = require('react');

module.exports = React.createClass({
  handleClick: function() {
    // this should invoke the handleClick of sortable-list.jsx
    this.props.whenItemClicked(this.props.type, this.props.item);
  },
  render: function() {
    return <li>
      <a onClick={this.handleClick} className={this.props.selected ? "selected" : ""}>
        {this.props.item.title}
      </a>
    </li>
  }
});

var React=require（'React'）；
module.exports=React.createClass({
handleClick:function（）{
//这应该调用sortable-list.jsx的handleClick
单击时的this.props.（this.props.type，this.props.item）；
},
render:function（）{
返回

{this.props.item.title}

}
});

单击列表项时，会调用list-item.jsx中的函数

handleClick

。但是由于某种原因，

this.props.whenItemClicked的调用失败（未定义）。
调试代码时，即使在第
return
行的sortable-list.jsx中，handleClick也未定义

我就是不明白为什么
 在默认情况下
中，此
指的是全局范围（在浏览器中它是
窗口
），因此当您在
中调用
此.handleClick
时，它将是
未定义的
，因为在
窗口
中没有函数
handleClick
，将第二个参数
.map
传递给您，它将在回调中设置
this
，如下所示

this.state.items.map(function (topic) {
  return <ListItem whenItemClicked= {this.handleClick} type={"topic"} item={topic}  key={topic.id}  />                
}, this)

this.state.items.map（函数（主题）{
返回
}，本页）
非常感谢，这才是真正的问题所在。这已经花了我好几个小时了！