使用ReactJs获取onClick目标的索引

小编典典

使用ReactJs获取onClick目标的索引

reactjs

我在以下URL处有代码：https :
//gist.github.com/motleydev/6d5e980e4d90cc5d52fd，在此构建标签类型设置。有一行选项卡，一部分内容，然后是另一行图像，这些状态具有交替的活动状态，具体取决于哪个选项卡是“打开的”。我最终需要做的是能够单击选项卡的索引，但是我似乎无法找出一种好的方法。我需要的只是整数。赞赏任何见识。谢谢！

阅读 769

2020-07-22

共1个答案

小编典典

Jorum解决方案有效。

您还可以替换：

    handleClick: function(event){
      event.preventDefault();
      console.log(this);
    },
    render: function(){
      var self = this;
      var tabs = this.props.tabs.map(function(tab,index){
        var clickHandler = self.handleClick;
        return (<li key={'tab'+index}><a ref={'tab'+index} href="#" onClick={clickHandler} > {tab.meta.title}</a></li>)
      });
      return (
        <nav>
          <ul>
            {tabs}
          </ul>
        </nav>
        )
    }
  });

通过：

    handleClick: function(index){
      event.preventDefault();
      console.log(this);
    },
    render: function(){
      var self = this;
      var tabs = this.props.tabs.map(function(tab,index){
        var clickHandler = self.handleClick.bind(null,index);
        return (<li key={'tab'+index}><a ref={'tab'+index} href="#" onClick={clickHandler} > {tab.meta.title}</a></li>)
      });
      return (
        <nav>
          <ul>
            {tabs}
          </ul>
        </nav>
        )
    }
  });

2020-07-22