使用 ReactJs 获取 onClick 目标的索引

Question

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

Answer 1

我目前无法对此进行测试，但与此类似。基本上发送一个 callback 和一个 index 到每个单独的选项卡。当一个标签被点击时，以索引为参数执行回调：

var Tab = React.createClass({
  handleClick: function (event) {
    event.preventDefault();
    this.props.tabClicked(this.props.index);
  },
  render: function () {
    return (
      <li>
        <a href="#" onClick={this.handleClick}>Tab {this.props.index}</a>
      </li>
    );
  }
});

var Tabs = React.createClass({
  handleClick: function (index) {
    console.log('Tab #' + index);
  },
  render: function(){
    var self = this;
    var tabs = this.props.tabs.map(function (tab, index) {
      return (
        <Tab key={index} index={index} tabClicked={this.handleClick} />
      )
    });

    return (
      <nav>
        <ul>
          {tabs}
        </ul>
      </nav>
    );
  }
});

Answer 2

通过使用 event.target 的 getAttribute() 函数并将索引添加为自定义属性，可以在不创建新组件的情况下做到这一点

  var Tabs = React.createClass({
    handleClick: function(event){
      event.preventDefault();
      console.log(event.target.getAttribute('index');
    },

    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} index={index} href="#" onClick={clickHandler} > {tab.meta.title}</a></li>)
      });
      return (
        <nav>
          <ul>
            {tabs}
          </ul>
        </nav>
        )
    }
  });

您可以在https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes#JavaScript_Access找到有关 event.target.getAttribute() 的更多信息

Answer 3

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