JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgithub.com/Wolfy87/EventEmitter/master/EventEmitter.min.js"></script>
<a href="#" id="sol">sol</a>
<a href="#" id="dora">dora</a>
<div id="bicho"></div>
<br>
the buttons change the state object of the component, and this changed state is passed to the form elements, which should change also, but don't, only the h1 changes.
CoffeeScript
sol =
_id: "3579b78f78dbdc62a7755e53b6020405"
descricao: "Uma cã gorda."
nome: "Sol"
dora =
_id: "3579b78f78dbdc62a7755e53b602442e"
descricao: "A cãnificação da maldade."
nome: "Dora"
main = ->
{style, button, div, span, a, p, hr, dl, dt, dd, label, fieldset, legend, table, tr, th, td, h1, h2, h3, form, input, textarea} = React.DOM
Bicho = React.createClass
getInitialState: ->
bicho: @props.bicho or {}
componentDidMount: ->
self = this
ee.on 'showBicho', (bicho) ->
self.setState bicho: bicho
show: (e) ->
console.log(@state.bicho)
e.preventDefault()
handleInputChange: (e) ->
doc = @state.bicho
doc[e.target.name] = e.target.value
@setState bicho: doc
render: ->
bicho = @state.bicho
if bicho._id
(div ref: bicho._id,
(h1 {}, "Editar #{bicho.nome}" or 'Adicionar bicho'),
(form ref: 'form', onSubmit: @show,
(input
type: 'text'
placeholder: 'Nome'
name: 'nome'
onChange: @handleInputChange
value: bicho.nome
),
(textarea
name: 'descricao'
onChange: @handleInputChange
value: bicho.descricao),
(button type: 'submit', 'Criar')
)
)
else
(div {})
React.renderComponent Bicho(), document.getElementById 'bicho'
window.ee = new EventEmitter()
main()
document.getElementById('sol').onclick = ->
ee.emit 'showBicho', sol
document.getElementById('dora').onclick = ->
ee.emit 'showBicho', dora