Onlick on items

package.json

@@ -33,6 +33,7 @@
   "dependencies": {
     "path-is-absolute": "^1.0.0",
     "radium": "^0.13.4",
-    "react": "^0.13.3"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4"
   }
 }

src/scripts/app.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Navbar from './components/Navbar';
 import NavItem from './components/NavItem';
 import NavbarHeader from './components/NavbarHeader';
@@ -8,15 +9,19 @@ import DropdownMenu from './components/DropdownMenu';
 
 const navitems = [
     {link: '#', title: 'Setup'},
-    {link: '#', title: 'Usage'},
+    {link: '#', title: 'Usage', onClick: function () {
+        alert('Usage');
+    }},
     {link: '#', title: 'Advanced'},
     {link: '#', title: 'Try it out'},
     {link: '#', title: 'FAQ'}
 ];
 
 const dropdownItems = [
     {href: '#', name: 'ES2015'},
-    {href: '#', name: 'Setup'},
+    {href: '#', name: 'Setup', onClick: function (item) {
+        alert('Setup clicked');
+    }},
     {href: '#', name: 'Usage'},
     {href: '#', name: 'Advanced'},
     {href: '#', name: 'Try it'},
@@ -28,7 +33,11 @@ const navbarInstance = (
         <NavbarHeader href="http://www.google.com" name="Babel"/>
         <NavbarItems>
             {navitems.map(item => {
-                return <NavItem key={navitems.indexOf(item)} link={item.link} title={item.title} />;
+                if (typeof(item.onClick) !== 'undefined') {
+                    return <NavItem key={navitems.indexOf(item)} link={item.link} title={item.title} onClick={item.onClick}/>;
+                } else {
+                    return <NavItem key={navitems.indexOf(item)} link={item.link} title={item.title}/>;
+                }
             })}
             <NavbarDropdown name="Dropdown">
                 <DropdownMenu menuItems={dropdownItems}/>
@@ -40,4 +49,4 @@ const navbarInstance = (
     </Navbar>
 );
 
-React.render(navbarInstance, document.getElementById('navigation_bar'));
+ReactDOM.render(navbarInstance, document.getElementById('navigation_bar'));

src/scripts/components/DropdownMenu.jsx

@@ -85,6 +85,15 @@ export default class DropdownMenu extends React.Component {
         return styles;
     }
 
+    clickHandler(event, item) {
+        if (typeof(item.onClick) !== 'undefined') {
+            event.preventDefault();
+            item.onClick(item);
+            return false;
+        }
+        return true;
+    }
+
     render() {
         const defStyle = this.getStyles();
         const {menuItems, style, menuItemStyle} = this.props;
@@ -94,7 +103,7 @@ export default class DropdownMenu extends React.Component {
                   return (
                     <li key={menuItems.indexOf(item)}>
                         <a key={item.name} style={[defStyle.link, menuItemStyle && menuItemStyle]}
-                            href={item.href}>{item.name}
+                            onClick={(event) => { return this.clickHandler(event, item); }} href={item.href}>{item.name}
                         </a>
                     </li>
                   );

src/scripts/components/NavItem.jsx

@@ -6,6 +6,7 @@ export default class NavItem extends React.Component {
     displayName = 'Navigation bar item'
 
     static propTypes = {
+        onClick: React.PropTypes.func,
         link:  React.PropTypes.string,
         title: React.PropTypes.string,
         style: React.PropTypes.object,
@@ -54,12 +55,21 @@ export default class NavItem extends React.Component {
         };
     }
 
+    clickHandler(event) {
+        if (typeof(this.props.onClick) !== 'undefined') {
+            event.preventDefault();
+            this.props.onClick();
+            return false;
+        }
+        return true;
+    }
+
     render() {
         const defStyle = this.getStyles();
         const {style, link, title, itemStyle} = this.props;
         return (
           <li ref="list" style={[defStyle.base, style && style]}>
-              <a ref="link" href={link} style={[defStyle.link, itemStyle && itemStyle]}>{title}</a>
+              <a ref="link" onClick={(event) => { return this.clickHandler(event); }} href={link} style={[defStyle.link, itemStyle && itemStyle]}>{title}</a>
           </li>
         );
     }