Prefix all event handlers with "on" rather than "handle", fixes #91

README.md

@@ -40,13 +40,13 @@ class App extends React.Component {
     }
   }
 
-  handleDelete (i) {
+  onDelete (i) {
     const tags = this.state.tags.slice(0)
     tags.splice(i, 1)
     this.setState({ tags })
   }
 
-  handleAddition (tag) {
+  onAddition (tag) {
     const tags = [].concat(this.state.tags, tag)
     this.setState({ tags })
   }
@@ -56,8 +56,8 @@ class App extends React.Component {
       <ReactTags
         tags={this.state.tags}
         suggestions={this.state.suggestions}
-        handleDelete={this.handleDelete.bind(this)}
-        handleAddition={this.handleAddition.bind(this)} />
+        onDelete={this.onDelete.bind(this)}
+        onAddition={this.onAddition.bind(this)} />
     )
   }
 }
@@ -75,11 +75,11 @@ React.render(<App />, document.getElementById('app'))
 - [`minQueryLength`](#minquerylength-optional)
 - [`maxSuggestionsLength`](#maxsuggestionslength-optional)
 - [`classNames`](#classnames-optional)
-- [`handleAddition`](#handleaddition-optional)
-- [`handleDelete`](#handledelete-optional)
-- [`handleInput`](#handleinput-optional)
-- [`handleFocus`](#handlefocus-optional)
-- [`handleBlur`](#handleblur-optional)
+- [`onAddition`](#onaddition-optional)
+- [`onDelete`](#ondelete-optional)
+- [`onInput`](#oninput-optional)
+- [`onFocus`](#onfocus-optional)
+- [`onBlur`](#onblur-optional)
 - [`allowNew`](#allownew-optional)
 - [`tagComponent`](#tagcomponent-optional)
 
@@ -146,34 +146,34 @@ Override the default class names. Defaults:
 }
 ```
 
-#### handleAddition (required)
+#### onAddition (required)
 
 Function called when the user wants to add a tag. Receives the tag.
 
 ```js
-function (tag) {
+function onAddition (tag) {
   // Add the tag { id, name } to the tag list
   tags.push(tag)
 }
 ```
 
-#### handleDelete (required)
+#### onDelete (required)
 
 Function called when the user wants to delete a tag. Receives the tag index.
 
 ```js
-function (i) {
+function onDelete (i) {
   // Delete the tag at index i
   tags.splice(i, 1)
 }
 ```
 
-#### handleInput (optional)
+#### onInput (optional)
 
 Optional event handler when the input changes. Receives the current input value.
 
 ```js
-function (input) {
+function onInput (input) {
   if (!this.state.busy) {
     this.setState({ busy: true })
 
@@ -184,11 +184,11 @@ function (input) {
 }
 ```
 
-#### handleFocus (optional)
+#### onFocus (optional)
 
 Optional event handler when the input receives focus. Receives no arguments.
 
-#### handleBlur (optional)
+#### onBlur (optional)
 
 Optional event handler when focus on the input is lost. Receives no arguments.
 

example/main.js

@@ -18,13 +18,13 @@ class App extends React.Component {
     }
   }
 
-  handleDelete (i) {
+  onDelete (i) {
     const tags = this.state.tags.slice(0)
     tags.splice(i, 1)
     this.setState({ tags })
   }
 
-  handleAddition (tag) {
+  onAddition (tag) {
     const tags = [].concat(this.state.tags, tag)
     this.setState({ tags })
   }
@@ -35,8 +35,8 @@ class App extends React.Component {
         <Tags
           tags={this.state.tags}
           suggestions={this.state.suggestions}
-          handleDelete={this.handleDelete.bind(this)}
-          handleAddition={this.handleAddition.bind(this)} />
+          onDelete={this.onDelete.bind(this)}
+          onAddition={this.onAddition.bind(this)} />
         <hr />
         <pre><code>{JSON.stringify(this.state.tags, null, 2)}</code></pre>
       </div>

lib/ReactTags.js

@@ -46,17 +46,17 @@ class ReactTags extends React.Component {
     })
   }
 
-  handleInput (e) {
+  onInput (e) {
     const query = e.target.value
 
-    if (this.props.handleInput) {
-      this.props.handleInput(query)
+    if (this.props.onInput) {
+      this.props.onInput(query)
     }
 
     this.setState({ query })
   }
 
-  handleKeyDown (e) {
+  onKeyDown (e) {
     const { query, selectedIndex } = this.state
     const { delimiters } = this.props
 
@@ -105,25 +105,25 @@ class ReactTags extends React.Component {
     }
   }
 
-  handleClick (e) {
+  onClick (e) {
     if (document.activeElement !== e.target) {
       this.input.input.focus()
     }
   }
 
-  handleBlur () {
+  onBlur () {
     this.setState({ focused: false, selectedIndex: -1 })
 
-    if (this.props.handleBlur) {
-      this.props.handleBlur()
+    if (this.props.onBlur) {
+      this.props.onBlur()
     }
   }
 
-  handleFocus () {
+  onFocus () {
     this.setState({ focused: true })
 
-    if (this.props.handleFocus) {
-      this.props.handleFocus()
+    if (this.props.onFocus) {
+      this.props.onFocus()
     }
   }
 
@@ -132,7 +132,7 @@ class ReactTags extends React.Component {
       return
     }
 
-    this.props.handleAddition(tag)
+    this.props.onAddition(tag)
 
     // reset the state
     this.setState({
@@ -142,7 +142,7 @@ class ReactTags extends React.Component {
   }
 
   deleteTag (i) {
-    this.props.handleDelete(i)
+    this.props.onDelete(i)
     this.setState({ query: '' })
   }
 
@@ -165,16 +165,16 @@ class ReactTags extends React.Component {
     this.state.focused && classNames.push(this.state.classNames.rootFocused)
 
     return (
-      <div className={classNames.join(' ')} onClick={this.handleClick.bind(this)}>
+      <div className={classNames.join(' ')} onClick={this.onClick.bind(this)}>
         <div className={this.state.classNames.selected} aria-live='polite' aria-relevant='additions removals'>
           {tags}
         </div>
         <div
           className={this.state.classNames.search}
-          onBlurCapture={this.handleBlur.bind(this)}
-          onFocusCapture={this.handleFocus.bind(this)}
-          onInput={this.handleInput.bind(this)}
-          onKeyDown={this.handleKeyDown.bind(this)}>
+          onBlurCapture={this.onBlur.bind(this)}
+          onFocusCapture={this.onFocus.bind(this)}
+          onInput={this.onInput.bind(this)}
+          onKeyDown={this.onKeyDown.bind(this)}>
           <Input {...this.state}
             ref={(c) => { this.input = c }}
             listboxId={listboxId}
@@ -213,11 +213,11 @@ ReactTags.propTypes = {
   suggestions: PropTypes.arrayOf(PropTypes.object),
   autoresize: PropTypes.bool,
   delimiters: PropTypes.arrayOf(PropTypes.string),
-  handleDelete: PropTypes.func.isRequired,
-  handleAddition: PropTypes.func.isRequired,
-  handleInput: PropTypes.func,
-  handleFocus: PropTypes.func,
-  handleBlur: PropTypes.func,
+  onDelete: PropTypes.func.isRequired,
+  onAddition: PropTypes.func.isRequired,
+  onInput: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
   minQueryLength: PropTypes.number,
   maxSuggestionsLength: PropTypes.number,
   classNames: PropTypes.object,

lib/Suggestions.js

@@ -34,7 +34,7 @@ class Suggestions extends React.Component {
     })
   }
 
-  handleMouseDown (item, e) {
+  onMouseDown (item, e) {
     // focus is shifted on mouse down but calling preventDefault prevents this
     e.preventDefault()
     this.props.addTag(item)
@@ -64,7 +64,7 @@ class Suggestions extends React.Component {
           role='option'
           className={classNames.join(' ')}
           aria-disabled={item.disabled === true}
-          onMouseDown={this.handleMouseDown.bind(this, item)}>
+          onMouseDown={this.onMouseDown.bind(this, item)}>
           <span dangerouslySetInnerHTML={markIt(item.name, this.props.query)} />
         </li>
       )

spec/ReactTags.spec.js

@@ -20,11 +20,11 @@ function createInstance (data = {}) {
   const defaults = {
     tags: [],
     suggestions: [],
-    handleBlur: sinon.stub(),
-    handleFocus: sinon.stub(),
-    handleDelete: sinon.stub(),
-    handleAddition: sinon.stub(),
-    handleInput: sinon.stub()
+    onBlur: sinon.stub(),
+    onFocus: sinon.stub(),
+    onDelete: sinon.stub(),
+    onAddition: sinon.stub(),
+    onInput: sinon.stub()
   }
 
   props = Object.assign(defaults, data)
@@ -125,10 +125,10 @@ describe('React Tags', () => {
       createInstance()
 
       TestUtils.Simulate.focus($('input'))
-      sinon.assert.calledOnce(props.handleFocus)
+      sinon.assert.calledOnce(props.onFocus)
 
       TestUtils.Simulate.blur($('input'))
-      sinon.assert.calledOnce(props.handleBlur)
+      sinon.assert.calledOnce(props.onBlur)
     })
   })
 
@@ -147,31 +147,31 @@ describe('React Tags', () => {
     it('triggers the change callback', () => {
       type(query)
 
-      sinon.assert.called(props.handleInput)
-      sinon.assert.calledWith(props.handleInput, query)
+      sinon.assert.called(props.onInput)
+      sinon.assert.calledWith(props.onInput, query)
     })
 
     it('can allow new, non-suggested tags to be added', () => {
       createInstance({ allowNew: false })
 
       type(query); key('Enter')
 
-      sinon.assert.notCalled(props.handleAddition)
+      sinon.assert.notCalled(props.onAddition)
 
       createInstance({ allowNew: true })
 
       type(query); key('Enter')
 
-      sinon.assert.calledOnce(props.handleAddition)
-      sinon.assert.calledWith(props.handleAddition, { name: query })
+      sinon.assert.calledOnce(props.onAddition)
+      sinon.assert.calledWith(props.onAddition, { name: query })
     })
 
     it('can add new tags when a delimiter character is entered', () => {
       createInstance({ allowNew: true, delimiters: ['Enter', ',', ';'] })
 
       type('foo,bar;baz'); key('Enter')
 
-      sinon.assert.calledThrice(props.handleAddition)
+      sinon.assert.calledThrice(props.onAddition)
     })
   })
 
@@ -291,30 +291,30 @@ describe('React Tags', () => {
 
       key('ArrowDown', 'Enter')
 
-      sinon.assert.notCalled(props.handleAddition)
+      sinon.assert.notCalled(props.onAddition)
     })
 
     it('triggers addition when a suggestion is clicked', () => {
       type(query); click($('li[role="option"]:nth-child(2)'))
 
-      sinon.assert.calledOnce(props.handleAddition)
-      sinon.assert.calledWith(props.handleAddition, { id: 196, name: 'United Kingdom' })
+      sinon.assert.calledOnce(props.onAddition)
+      sinon.assert.calledWith(props.onAddition, { id: 196, name: 'United Kingdom' })
     })
 
     it('triggers addition for the selected suggestion when a delimiter is pressed', () => {
       key('Enter')
 
-      sinon.assert.notCalled(props.handleAddition)
+      sinon.assert.notCalled(props.onAddition)
 
       type(query); key('ArrowDown', 'ArrowDown', 'Enter')
 
-      sinon.assert.calledOnce(props.handleAddition)
-      sinon.assert.calledWith(props.handleAddition, { id: 196, name: 'United Kingdom' })
+      sinon.assert.calledOnce(props.onAddition)
+      sinon.assert.calledWith(props.onAddition, { id: 196, name: 'United Kingdom' })
     })
 
     it('triggers addition for an unselected but matching suggestion when a delimiter is pressed', () => {
       type('united kingdom'); key('Enter')
-      sinon.assert.calledWith(props.handleAddition, { id: 196, name: 'United Kingdom' })
+      sinon.assert.calledWith(props.onAddition, { id: 196, name: 'United Kingdom' })
     })
 
     it('clears the input when an addition is triggered', () => {
@@ -339,20 +339,20 @@ describe('React Tags', () => {
     it('triggers removal when a tag is clicked', () => {
       click($('.react-tags__selected-tag'))
 
-      sinon.assert.calledOnce(props.handleDelete)
-      sinon.assert.calledWith(props.handleDelete, sinon.match(0))
+      sinon.assert.calledOnce(props.onDelete)
+      sinon.assert.calledWith(props.onDelete, sinon.match(0))
     })
 
     it('deletes the last selected tag when backspace is pressed and query is empty', () => {
       type(''); key('Backspace')
 
-      sinon.assert.calledOnce(props.handleDelete)
-      sinon.assert.calledWith(props.handleDelete, sinon.match(instance.props.tags.length - 1))
+      sinon.assert.calledOnce(props.onDelete)
+      sinon.assert.calledWith(props.onDelete, sinon.match(instance.props.tags.length - 1))
     })
 
     it('does not delete the last selected tag when backspace is pressed and query is not empty', () => {
       type('uni'); key('Backspace')
-      sinon.assert.notCalled(props.handleDelete)
+      sinon.assert.notCalled(props.onDelete)
     })
 
     it('does not delete the last selected tag when allowBackspace option is false', () => {
@@ -363,7 +363,7 @@ describe('React Tags', () => {
 
       type(''); key('Backspace')
 
-      sinon.assert.notCalled(props.handleDelete)
+      sinon.assert.notCalled(props.onDelete)
     })
 
     it('can render a custom tag component when provided', () => {