Получение указателя onClick target с помощью ReactJs

Question

У меня есть код по следующему URL: https://gist.github.com/motleydev/6d5e980e4d90cc5d52fd, где я создаю настройку типа табуляции. Существует ряд вкладок, раздел содержимого, а затем еще одна строка изображений с переменным активным состоянием в зависимости от того, какая вкладка «открыта». То, что мне в конечном итоге нужно сделать, - это получить индекс вкладки, нажатой, но я не могу понять, как это сделать. Все, что мне нужно, это просто целое число. Цените любое понимание. Благодаря!

Answer 1

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

By:

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

Answer 2

Я не могу проверить это в настоящее время, но что-то вроде этого. В основном отправьте обратный вызов и индекс на каждую отдельную вкладку. При нажатии на вкладку выполните обратный вызов с индексом в качестве параметра:

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