React JS：使用 props 傳遞我的處理程序函數的問題

Question

我有三個班級。 首先，我聲明了一個處理函數（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 **/
    },

...
});

第二個是列表，創建列表項。 這個類應該從第一個類中獲取處理函數並將其傳遞給第三個類。

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

最后是可以出現點擊的類 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>
  }
});

當我單擊一個列表項時，將調用 list-item.jsx 中的函數handleClick 。 但是由於某種原因， this.props.whenItemClicked的調用失敗（未定義）。 當我調試代碼時，即使在 sortable-list.jsx 行中return <ListItem whenItemClicked= {this.handleClick} type={"topic"} item={topic} key={topic.id} /> handleClick 未定義.

我就是不明白為什么。

Answer 1

在.map ，默認情況下this指的是全局范圍（在瀏覽器中是window ），因此當您在.map調用this.handleClick時，它將是undefined因為在window中沒有函數handleClick ，將第二個參數傳遞給您.map在回調中設置this ，就像這樣

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