react double click

by Shital Agarwal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Clicky extends React.Component {

  constructor(props: Props) {
    super(props);
    this._handleDoubleClickItem = this._handleDoubleClickItem.bind(this);
  }
	 
  _handleDoubleClickItem(event): void {
  let originalData = [{
  	name: 'present'
  }, {
  	name: 'absent'
  }, {
  	name: 'present_absent'
  }, {
  	name: 'present_some'
  }];
  	console.log("Event", event.target.dataset.value)
    let newValue;
    for(let i=0; i < originalData.length; i++) {
    console.log(originalData[i].name)
  	console.log(event.target.dataset.value)
    
    	if(originalData[i].name == event.target.dataset.value) {
      	alert('Here')
        newValue = i == (originalData.length - 1) ? 0 : (i + 1) ; 
        break;
      }
    }
    alert('I got double-clicked!---'+ originalData[newValue].name);

}
  
  render() {
    return (
    	<ul >
      	<li data-value="present" onClick={this._handleDoubleClickItem}>try</li>
      </ul>
    );
  }
}
 
ReactDOM.render(<Clicky />, document.querySelector('#container'));