Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
My First React Component
# My First React Component
# Added to this Gist for posterity.
# Extracted from https://github.com/ministrycentered/transposr/commit/fa616871914ac16b72d0d1b035a08e01e337bd07
# January 08, 2014
{ div, input } = React.DOM
AudioFileStepSelector = React.createClass
getInitialState: ->
halfSteps: 2
incrementHalfSteps: ->
@_dipsatchHalfStepChange(@state.halfSteps + 1)
decrementHalfSteps: ->
@_dipsatchHalfStepChange(@state.halfSteps - 1)
# Private
_halfStepRange: [-11..11]
_dipsatchHalfStepChange: (halfSteps) ->
if halfSteps in @_halfStepRange
@setState( halfSteps: halfSteps )
render: ->
(input { name: 'song_key', type: 'text', value: @state.halfSteps }, [
(div { className: 'dec num_button', onClick: @decrementHalfSteps }, ['-']),
(div { className: 'inc num_button', onClick: @incrementHalfSteps }, ['+']) ])
$(document).on 'ready page:load', ->
React.renderComponent AudioFileStepSelector({}), document.getElementById('js-audio-steps-selector')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment