[Demo] React - Form onChange

by elct9620

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

CoffeeScript

{input, div, span} = React.DOM

Nickname = React.createClass {
    getInitialState: ->
        {nickname: @props.nickname}
    handleChange: (event)->
        @setState {nickname: @refs.nickname.getDOMNode().value.trim()}
    render: ->
        (
            div {}, [
                input {ref: 'nickname', className: 'form-control', onChange: @handleChange},
                div {}, [
                    span {className: 'label label-success'}, 'Nickname'
                ],
                " : "
                ,
                @state.nickname
            ]
        )
}

React.renderComponent (Nickname {nickname: "Wade"}), document.body