It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>React Lesson 15: dynamically create componenets</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>

    <style>

        body {

            margin: 25px;

        }

    </style>

</head>

<body>

<div id="panel"></div>

<script type="text/jsx">

    /** @jsx React.DOM */

    var App = React.createClass({

        getInitialState:function(){

            return {

                name: '',

                email: ''

            }

        },

        update: function () {

           this.setState({

               name: this.refs.name.getDOMNode().value,

               email: this.refs.email.getDOMNode().value

           })

        },

        render:function(){

            return (

                <form>

                    <div>

                        <input type="text" ref="name" onChange={this.update} placeholder="Name"/>

                        <label>*{this.state.name}*</label>

                    </div>

                    <div>

                        <input type="text" ref="email" onChange={this.update} placeholder="Email"/>

                        <label>*{this.state.email}*</label>

                    </div>

                </form>

            );

        }

    });

    React.render(<App />, document.getElementById('panel'));

</script>

</body>

</html>

Use addon: ReactLink

1. include the script:

script src="https://fb.me/react-with-addons-0.13.3.js"></script>

2. Add mixin:

mixins: [React.addons.LinkedStateMixin],

3. Use valueLink={this.linkState('name')} instead of 'ref' and 'onChange':

<input valueLink={this.linkState('name')} type="text" placeholder="Name" />

Code:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>React Lesson 15: dynamically create componenets</title>

    <script src="https://fb.me/react-with-addons-0.13.3.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

    <style>

        body {

            margin: 25px;

        }

    </style>

</head>

<body>

<div id="panel"></div>

<script type="text/jsx">

    /** @jsx React.DOM */

    var App = React.createClass({

        mixins: [React.addons.LinkedStateMixin],

        getInitialState:function(){

            return {

                name: '',

                email: ''

            }

        },

        render:function(){

            return (

                <form>

                    <div>

                        <input valueLink={this.linkState('name')} type="text" placeholder="Name" />

                        <label>*{this.state.name}*</label>

                    </div>

                    <div>

                        <input valueLink={this.linkState('email')} type="text" placeholder="Email" />

                        <label>*{this.state.email}*</label>

                    </div>

                </form>

            );

        }

    });

    React.render(<App />, document.getElementById('panel'));

</script>

</body>

</html>

[React] React Fundamentals: with-addons - ReactLink的更多相关文章

  1. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  2. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  3. React/React Native 的ES5 ES6写法对照表－b

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  4. [React] react+redux+router+webpack+antd环境搭建一版

    好久之前搭建的一个react执行环境,受历史影响是webpack3.10.0和webpack-dev-server2.7.1的环境,新项目准备用webpack4重新弄弄了,旧的记录就合并发布了(在没有 ...

  5. React: React组件的生命周期

    一.简介 在前面的第二篇博文中对组件的生命周期虽然做了一个大略介绍,但总感觉说的过于简单,毕竟生命周期是React组件的核心部分.在我们熟练使用React挂载和合成组件来创建应用表现层的过程中,针对数 ...

  6. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  7. React/react相关小结

    React React组件由React元素组成,React组件使用React.Component或React.PureComponent来生成:React元素使用JSX的语法来编写或使用React.c ...

  8. [React] React Fundamentals: Add-on ClassSet() for ClassName

    To get the add-ons, use react-with-addons.js (and its minified counterpart) rather than the common r ...

  9. [React] React Fundamentals: Mixins

    Mixins will allow you to apply behaviors to multiple React components. Components are the best way t ...

随机推荐

  1. centos7 更改语言

    vim /etc/locale.conf 修改 LANG="en_US.UTF-8"

  2. favicon.ico的使用方法

    favicon.ico怎么来,就自己决定了. 虽说是放在网站根目录下就行了, 但最好是放在网站images目录下,方便统一管理. 然后在head.tpl.php 中的<head></ ...

  3. 软件测试software testing summarize

    软件测试(英语:software testing),描述一种用来促进鉴定软件的正确性.完整性.安全性和质量的过程.软件测试的经典定义是:在规定的条件下对程序进行操作,以发现程序错误,衡量软件质量,并对 ...

  4. mac os x 10.9.1 安装 Homebrew软件包管理工具及brew安装maven3.1.1

    Mac OSX上的软件包管理工具,安装软件或者卸载软件. 打开终端输入(如不行,可参考homebrew官网): ruby -e "$(curl -fsSL https://raw.githu ...

  5. C++11老关键字的新含义(auto, using，extern)

    http://blog.csdn.net/cnsword/article/details/8034947 公司可以使用c++11.看大牛的代码模仿使用,所以现在已经不知道什么使用的是c++的语法还是c ...

  6. 从string.size()和string.length()聊到长度的问题和一个关于数据结构定义的技巧

    最近工作中要查看一下string的长度,然后忘了是哪个函数,所以去网上搜了一搜,决定把网上学的和其他的一些有关长度的东西在这里汇总一下, 然后就有了此帖. string 是从c语言的char数组的概念 ...

  7. Quartz源码阅读

    基于Quartz1.8.5的源码解读 首先看一个demo //简单的任务管理类 //QuartzManager.java package quartzPackage; import java.text ...

  8. Jsp中获得集合List或Set的长度

    首先要引入<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> ...

  9. WINDOWS+L组合键锁定XP

    在Windows XP时工作时,我们经常要锁定计算机,当计算机被锁定后,只有重新登录才能够使用计算机,从而保证了计算机的安全. WINDOWS+L组合键锁定XP,就是键盘上右边的小窗口+L键 ,可以快 ...

  10. 5种php加密工具zendGuard、ionCube、SourceCop、SourceGuardian、phpShield

    PHP做桌面应用的想法: 除去icudt55.dll,PHP7用7ZIP压缩后不足7MB,而PHP自带了SQLite和CLI HTTP Server,用户打开浏览器就能访问PHP开发的桌面应用.如果源 ...