3
\$\begingroup\$

I'm new to ReactJs and trying to figure out the preferred style. I also have tried it enough to realize that I'm not a fan of jsx and prefer how React looks when written in coffeescript.

This is a very simple control (eventually will be a series of controls). It contains a select element and a button. When a selection is made and the button is clicked it triggers some domain activity which does work in a separate area.

flatten = (selection) -> console.log "Do domain work to the", selection

ActionsDemo = React.createClass: render ->
    FlattenRacer @props

FlattenRacer = React.createClass render: ->
    flattenSelected = =>
        selector = @refs['character']
        if selector.selected()
            flatten selector.selected()
            selector.clear()

    R.div (className: 'action'),
        CharacterSelector (racers: @props.racers, ref: 'character')
        R.button (onClick: flattenSelected), "Flatten"

CharacterSelector = React.createClass
    selected: -> @getDOMNode().value
    clear: -> @getDOMNode().value = null
    render: ->
        R.select null, 
            [R.option null, "-- Select --"].concat _.map @props.racers, (r) ->
                R.option (value: r), r

React.renderComponent (ActionsDemo racers: ['racer1', 'racer2', 'racer3']), 
                      (document.querySelector '#racetrack-actions')

The _ functionality is via lodash

The above works and is similar to the approach in the ReactJs tutorial but I keep hearing that React is about "data-flow" and this doesn't really seem like...that.

I've done a lot of knockoutjs and doing things in this manner seems kind of like a step backwards. For example if I wanted to disable the button unless the selector has a valid selection there's no obvious way to do this. It also seems like the CharacterSelector should be in charge of when it gets cleared. Also the entire refs mechanism feels a bit like a hack. This feels like I should be using functional reactive programming somewhere but not quite sure where.

As a side note, is there a way I can just force my CharacterSelector instance to re-render instead of having to create a clear method?

How can I improve this?

\$\endgroup\$

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.