handle onClick

tomkp · Aug 17, 2015 · 134b647 · 134b647
1 parent 1e36a7b
commit 134b647
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 20 deletions.
diff --git a/demo/Example.js b/demo/Example.js
@@ -6,14 +6,21 @@ import jsonp from 'jsonp';
 
 let Custom = React.createClass({
 
+    onClick(event) {
+        console.info('Custom.onClick', event);
+        var suggestion = this.props.suggestion;
+        this.props.onClick(suggestion.title);
+    },
+
+
     render() {
         var suggestion = this.props.suggestion;
         let classes = ['Suggestion'];
         if (this.props.selected) {
             classes.push('selected');
         }
         return (
-            <div className={classes.join(' ')} data-suggestion={suggestion.title}>
+            <div className={classes.join(' ')} data-suggestion={suggestion.title} onClick={this.onClick} >
                 <span className="titles">
                     <div className="series-title">{suggestion.seriesName?suggestion.seriesName:''}</div>
                     <div className="title">{suggestion.title}</div>

diff --git a/demo/bundle.js b/demo/bundle.js
@@ -12,6 +12,12 @@ var jsonp = _interopRequire(require("jsonp"));
 var Custom = React.createClass({
     displayName: "Custom",
 
+    onClick: function onClick(event) {
+        console.info("Custom.onClick", event);
+        var suggestion = this.props.suggestion;
+        this.props.onClick(suggestion.title);
+    },
+
     render: function render() {
         var suggestion = this.props.suggestion;
         var classes = ["Suggestion"];
@@ -20,7 +26,7 @@ var Custom = React.createClass({
         }
         return React.createElement(
             "div",
-            { className: classes.join(" "), "data-suggestion": suggestion.title },
+            { className: classes.join(" "), "data-suggestion": suggestion.title, onClick: this.onClick },
             React.createElement(
                 "span",
                 { className: "titles" },
@@ -129,7 +135,7 @@ var AutoSuggest = React.createClass({
         });
     },
 
-    handleClick: function handleClick(term) {
+    onClick: function onClick(term) {
         this.setState({
             index: -1,
             term: term,
@@ -198,7 +204,7 @@ var AutoSuggest = React.createClass({
             handleSpecial: this.handleSpecial,
             value: this.state.term
         }), React.createElement(DropDown, { key: "dropdown",
-            handleClick: this.handleClick,
+            onClick: this.onClick,
             suggestions: this.state.suggestions,
             display: this.state.displayDropDown,
             renderer: renderer,
@@ -225,9 +231,8 @@ var Suggestion = _interopRequire(require("./Suggestion"));
 var DropDown = React.createClass({
     displayName: "DropDown",
 
-    handleClick: function handleClick(event) {
-        var suggestion = event.target.getAttribute("data-suggestion");
-        this.props.handleClick(suggestion);
+    onClick: function onClick(suggestion) {
+        this.props.onClick(suggestion);
     },
 
     render: function render() {
@@ -245,10 +250,10 @@ var DropDown = React.createClass({
                         selected: selected,
                         suggestion: suggestion,
                         key: i,
-                        onClick: _this.handleClick
+                        onClick: _this.onClick
                     });
                 } else {
-                    return React.createElement(Suggestion, { key: i, suggestion: suggestion, selected: selected });
+                    return React.createElement(Suggestion, { key: i, suggestion: suggestion, selected: selected, onClick: _this.onClick });
                 }
             });
         }
@@ -317,14 +322,19 @@ var React = _interopRequire(require("react"));
 var Suggestion = React.createClass({
     displayName: "Suggestion",
 
+    onClick: function onClick(event) {
+        var suggestion = this.props.suggestion;
+        this.props.onClick(suggestion);
+    },
+
     render: function render() {
         var suggestion = this.props.suggestion;
         var classes = [this.constructor.displayName];
         var selected = this.props.selected;
         if (selected) {
             classes.push("selected");
         }
-        return React.createElement("div", { className: classes.join(" "), "data-suggestion": suggestion }, suggestion);
+        return React.createElement("a", { className: classes.join(" "), "data-suggestion": suggestion, onClick: this.onClick }, suggestion);
     }
 });
 

diff --git a/src/AutoSuggest.js b/src/AutoSuggest.js
@@ -37,7 +37,7 @@ let AutoSuggest = React.createClass({
     },
 
 
-    handleClick(term) {
+    onClick(term) {
         this.setState({
             index: -1,
             term: term,
@@ -114,7 +114,7 @@ let AutoSuggest = React.createClass({
                     value={this.state.term}
                 />
                 <DropDown key="dropdown"
-                    handleClick={this.handleClick}
+                    onClick={this.onClick}
                     suggestions={this.state.suggestions}
                     display={this.state.displayDropDown}
                     renderer={renderer}

diff --git a/src/DropDown.js b/src/DropDown.js
@@ -5,9 +5,8 @@ import Suggestion from './Suggestion';
 
 let DropDown = React.createClass({
 
-    handleClick(event) {
-        let suggestion = event.target.getAttribute('data-suggestion');
-        this.props.handleClick(suggestion);
+    onClick(suggestion) {
+        this.props.onClick(suggestion);
     },
 
 
@@ -25,10 +24,10 @@ let DropDown = React.createClass({
                             selected: selected,
                             suggestion: suggestion,
                             key: i,
-                            onClick: this.handleClick
+                            onClick: this.onClick
                         });
                     } else {
-                        return <Suggestion key={i} suggestion={suggestion} selected={selected} />
+                        return <Suggestion key={i} suggestion={suggestion} selected={selected} onClick={this.onClick} />
                     }
                 });
         }

diff --git a/src/Suggestion.js b/src/Suggestion.js
@@ -1,9 +1,15 @@
 import React from 'react';
 
 
-
 let Suggestion = React.createClass({
 
+
+    onClick(event) {
+        let suggestion = this.props.suggestion;
+        this.props.onClick(suggestion);
+    },
+
+
     render() {
         let suggestion = this.props.suggestion;
         let classes = [this.constructor.displayName];
@@ -12,9 +18,9 @@ let Suggestion = React.createClass({
             classes.push('selected');
         }
         return (
-            <div className={classes.join(' ')} data-suggestion={suggestion}>
+            <a className={classes.join(' ')} data-suggestion={suggestion} onClick={this.onClick}>
                 {suggestion}
-            </div>
+            </a>
         );
     }
 });