Question

I have three classes. In the first, I declare a handler-function (handleItemClick). I want to pass this function to the last class, a clickable list-item.

First class:

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 **/
    },

...
});

The second is the list, creating list items. This class should get the handler function from the first class and pass it to the third.

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

And finally the class list-item.jsx where clicks can appear.

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

When I click on a list item, the function handleClick in list-item.jsx is called. But the call of this.props.whenItemClicked fails (is undefined) for some reason. When I debug the code, even in sortable-list.jsx in line return <ListItem whenItemClicked= {this.handleClick} type={"topic"} item={topic} key={topic.id} /> the handleClick is undefined.

I just can't figure out why.

Answer 1

In .map by default this refers to global scope (in browser it is window), so when you call this.handleClick in .map it will be undefined because in window there is not function handleClick, pass second argument to you .map that will set this in callback, like this

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

React JS: Problems with passing my handler function with props

1 个答案: