[Assorted-commits] SF.net SVN: assorted:[1880] sandbox/trunk/src/web/react/index.coffee
Brought to you by:
yangzhang
|
From: <yan...@us...> - 2014-03-23 08:45:55
|
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.
|