Magic input for reactJS, supporting deep path binding

magic-input.jsx.js.coffee

MagicInput = React.createClass

  onChange: (e) ->
    state = @props.binding[0].state
    Sonar.changeByArray state, @path, e.target.value
    @props.binding[0].setState state

  getValue: ->
    value = @props.binding[0].state
    @path ||= @props.binding[1].split('.')
    i = 0
    while i < @path.length
      value = value[@path[i]]
      i++
    value

  render: ->
    React.createElement 'input',
      type: 'input'
      onChange: @onChange
      value: @getValue()