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

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.