JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/curl/0.7.3/curl/curl.min.js"></script>
<div id="content"></div>
CoffeeScript
curl.config
paths:
react: '//cdnjs.cloudflare.com/ajax/libs/react/0.8.0/react-with-addons.js'
define 'RadioField', ['react'], (React) ->
{input, label, div} = React.DOM
RadioField = React.createClass
handleChange: (e) ->
if e.target.checked
@props.reportValue @props.name, e.target.value
render: ->
(div {},
(label {},
(input
type: 'radio'
name: @props.name
value: option.value
onChange: @handleChange
),
option.label,
) for option in @props.fields
)
return RadioField
define 'content', [
'react',
'RadioField'
], (React, RadioField) ->
{style, button, div, span, a, p, hr, label, fieldset, legend, table, tr, th, td, h1, h2, h3, form, input, textarea} = React.DOM
SearchResults = React.createClass
getInitialState: ->
res: []
doTheSearch: (query) ->
console.log query
render: ->
(div {},
(Search doTheSearch: @doTheSearch),
(Results res: @state.res)
)
Search = React.createClass
getInitialState: ->
especie: ''
genero: ''
porte: ''
prepareTheSearch: ->
query = @state
@props.doTheSearch query
handleRadioChange: (fieldname, value) ->
change = {}
change[fieldname] = value
@setState change
render: ->
(form onSubmit: @prepareTheSearch,
(RadioField
name: 'especie'
fields: [{
label: 'Cão',
value: 'cachorro'
}, {
label: 'Gato',
value: 'gato'
}]
reportValue: @handleRadioChange),
(button type: 'submit')
)
Results = React.createClass
render: ->
(div {}, (div {}, (
(div ref: @props._id,
(p {}, @props.nome),
(p {}, @props.especie),
)
) for bicho in @props.res))
return (element) ->
React.renderComponent SearchResults(),...