Question

我正在尝试使用eventListener返回<li>元素。但是我希望<li>将它拥有的属性传递给onClick函数。这就是我所说的：

return (<li onClick={this.changeTab(tab_id)} tab_id={index + 1} <a href="#">{obj.display_name}</a></li>);

但是，如果您执行此类操作，则会收到error: Uncaught ReferenceError: tab_id is not defined

如您所见，tab_id归li所有。我的组件是否可以通过该属性？这是我完整的上下文组件：

var MainMenu = React.createClass({
                changeTab: function(tab_id){
                    this.props.dprops.changeTab(tab_id)
                }, 
                render: function() {

                    var categories = this.props.groupsData.objects.map(function(obj, index){
                        return (<li onClick={this.changeTab(tab_id)} tab_id={index + 1} <a href="#">{obj.display_name}</a></li>);   
                    });
                    return (<ul><li className="active"><a href="#">All Videos</a></li>{categories}</ul></div>

                        </div>);
                }
            });

Answer 1

嗯，变量 tab_id在任何地方都不存在。您正试图致电this.changeTab(tab_id)，其中tab_id未定义。

这里有两个错误：

您正在尝试访问未定义的变量。
您正在调用事件处理程序，而不是将传递给onClick。

一个简单的解决方案是使用.bind创建一个带有绑定参数的新函数：

onClick={this.changeTab.bind(this, index + 1)}

缺点是每次组件重新渲染时都会创建一个新函数。

您可以通过创建代表列表项的组件来解决此问题。该组件会将其tab_id道具传递给其onClick道具。

示例：

var ListItem = React.createClass({
    _onClick: function() {
        this.props.onClick(this.props.tabID);
    },

    render: function() {
        return <li onClick={this._onClick}>{this.props.children}</li>;
    }
});

// and in the MainMenu#render method

this.props.groupsData.objects.map(function(obj, index) {
  return (
     <li onClick={this.changeTab} tabID={index + 1} >
       <a href="#">{obj.display_name}</a>
     </li>
  );
}, this);

ReactJS传递元素拥有的函数的prop

1 个答案: