ReactJS将元素拥有的道具传递给函数

ReactJS passing a prop that the element owns to a function

本文关键字：函数 元素 拥有 ReactJS      更新时间：2023-09-26

我正试图返回一个带有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>);
                }
            });

好吧，变量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);
相关文章：