[Assorted-commits] SF.net SVN: assorted:[1880] sandbox/trunk/src/web/react/index.coffee

[<yan...@us...>]

Revision: 1880
          http://sourceforge.net/p/assorted/svn/1880
Author:   yangzhang
Date:     2014-03-23 08:45:53 +0000 (Sun, 23 Mar 2014)
Log Message:
-----------
Add input demos

Modified Paths:
--------------
    sandbox/trunk/src/web/react/index.coffee

Modified: sandbox/trunk/src/web/react/index.coffee
===================================================================
--- sandbox/trunk/src/web/react/index.coffee	2014-03-22 20:27:47 UTC (rev 1879)
+++ sandbox/trunk/src/web/react/index.coffee	2014-03-23 08:45:53 UTC (rev 1880)
@@ -3,7 +3,9 @@
 React = require 'react'
 R = React.DOM
 
-Foo = React.createClass(
+# Show that props update while state remains the same.
+# See also <https://medium.com/react-tutorials/14a6d4f736f5>.
+PropsVsState = React.createClass(
   getInitialState: ->
     counter: @props.initCount
   componentDidUpdate: ->
@@ -15,13 +17,30 @@
       "counter: #{@state.counter}"
 )
 
+# Show that value is a tightly bound property of input controls.
+# See also <http://facebook.github.io/react/docs/forms.html>.
+InputTextChanges = React.createClass(
+  handleChange: (e) -> @setState(msg: e.target.value)
+  handleChange2: (e) -> @setState(msg2: e.target.value.substr(0, 50))
+  getInitialState: ->
+    msg: 'I update bound state. I-beam will magically work.'
+    msg2: 'I-beam breaks as soon as set state value differs.'
+  render: ->
+    R.div {},
+      R.input {type: 'text', value: 'Dare you to edit me.'}
+      R.input {type: 'text', defaultValue: 'I am easily persuaded.'}
+      R.input {type: 'text', value: @state.msg, onChange: @handleChange}
+      R.input {type: 'text', value: @state.msg2, onChange: @handleChange2}
+)
+
 Main = React.createClass(
   getInitialState: ->
     counter: 0
   render: ->
     R.div {},
-      Foo {initCount: @state.counter}
-      Foo {initCount: @state.counter + 1}
+      PropsVsState {initCount: @state.counter}
+      PropsVsState {initCount: @state.counter + 1}
+      InputTextChanges()
 )
 
 $ ->

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.