使用ReactJs获取onClick目标的索引

我在下面的url上有代码：我正在构建一个选项卡类型设置。有一行选项卡、一部分内容和另一行图像，根据哪个选项卡处于打开状态，它们交替处于活动状态。我最终需要做的是能够点击标签的索引，但我似乎找不到一个好方法。我只需要整数。感谢你的洞察力。谢谢

我目前无法测试这一点，但大致是这样的。基本上是向每个单独的选项卡发送回调和索引。单击选项卡时，以索引作为参数执行回调：

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

---

我目前还不能测试这个，但大致是这样的。基本上是向每个单独的选项卡发送回调和索引。单击选项卡时，以索引作为参数执行回调：

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

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

作者：

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

作者：

通过使用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>
        )
    }
  });

有关event.target.getAttribute的更多信息，请访问 通过使用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>
        )
    }
  });

---

您可以在

中找到有关event.target.getAttribute的更多信息，创建另一个名为Tab的组件，并将容器onClick事件作为属性和索引发送。然后可以在实际选项卡上调用onClick，在该选项卡上使用正确的索引调用容器的onClick。我相信答案是将索引存储在HTML元素上，并使用e.target或e.currentTarget进行检索，而不是每次映射发生时都绑定该函数，创建另一个名为Tab的组件，并将容器onClick事件作为属性和索引发送。然后可以在实际选项卡上调用onClick，在该选项卡上使用正确的索引调用容器的onClick。我相信答案是将索引存储在HTML元素上，并使用e.target或e.currentTarget进行检索，而不是在每次映射发生时都绑定函数。因此，我要感谢您，因为这是一个代码较少的功能解决方案，尽管我也很欣赏Jorums解决方案。我首先尝试了一种解决方案，但每次我尝试将其传递到绑定的第一个参数而不是null对象，它总是说react为您这样做，停止自己这样做。为什么它与空对象一起工作，而事件只是被传递而不管呢？我也有这个问题。这是因为React不希望您更改方法调用的上下文，即使您绑定到已经绑定的组件，这有点奇怪，并且只有使用null绑定不会更改上下文。或者，您可以使用下划线/lodashI中的u.partial。我正在尝试这种方法，索引可以很好地传递。但是，我的单击处理程序中的这个现在为null，我需要能够通过通常的方法->this.setState{…}在单击处理程序中设置状态，因为它为null。因此，我要给你们荣誉，因为这是一个功能性的解决方案，代码更少，尽管我也很欣赏Jorums的解决方案。我首先尝试了一种解决方案，但每次我尝试将其传递到绑定的第一个参数而不是null对象，它总是说react为您这样做，停止自己这样做。为什么它与空对象一起工作，而事件只是被传递而不管呢？我也有这个问题。这是因为React不希望您更改方法调用的上下文，即使您绑定到已经绑定的组件，这有点奇怪，并且只有使用null绑定不会更改上下文。或者，您可以使用下划线/lodashI中的u.partial。我正在尝试这种方法，索引可以很好地传递。但是，我的单击处理程序中的这个现在为null，我需要能够通过通常的方法->this.setState{…}在单击处理程序中设置状态，因为它为null。这是答案，将数据存储在元件上这是正确答案。您还可以创建一个包装器来捕获事件，并将其与数据元素一起传递给父级。你可以检查这把小提琴这是答案，把数据存储在元素上这是正确的答案。您还可以创建一个包装器来捕获事件，并将其与数据元素一起传递给父级。你可以检查一下这把小提琴