使用ReactJs获取onClick目标的索引

Question

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

Answer 1

我目前无法对此进行测试,但这与此类似.基本上向每个单独的选项卡发送回调和索引.单击选项卡时,使用索引作为参数执行回调:

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