使用 ReactJs 获取 onClick 目标的索引 [英] Getting Index of onClick target with ReactJs

问题描述

我在以下网址有代码:https://gist.github.com/motleydev/6d5e980e4d90cc5d52fd 我正在构建选项卡类型设置的地方.有一排选项卡，一段内容，然后是另一行具有交替活动状态的图像，具体取决于哪个选项卡是打开的".我最终需要做的是能够点击选项卡的索引，但我似乎无法找到一个好的方法来做到这一点.我需要的只是整数.欣赏任何见解.谢谢！

I have code at the following url: https://gist.github.com/motleydev/6d5e980e4d90cc5d52fd where I am constructing a tab type setup. There's a row of tabs, a section of content and then another row of images with an alternating active state depending on which tab is "open." What I ultimately need to do is be able to get the index of the tab clicked but I can't seem to figure out a good way to do that. All I need is just the integer. Appreciate any insight. Thanks!

推荐答案

Jorum 解决方案有效.

Jorum solution works.

你也可以替换:

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

这篇关于使用 ReactJs 获取 onClick 目标的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！