首先要引入她。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="./js/react-with-addons.js"></script>

    <script src="./js/react-dom.js"></script>

    <script src="./js/browser.min.js"></script>

</head>

<body>

    <div id="demo"></div>

    <script type="text/babel">

        console.log(React);

        //定义一个组建，名字第一个必须是大写

        var Firs = React.createClass({

            mixins:[React.addons.LinkedStateMixin],

            /*组建的状态*/

            getInitialState:function(){

                return{

                    mes:this.props.value

                }

            },

            render:function(){

                return(

                    //必须要有一个大标签包围着才可以

                    <div>

                        <h1>Hello {this.props.user}</h1>

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

                        <input type="button" value={this.props.sendname} />

                        <p>{this.state.mes}</p>

                    </div>

                );

            },

            changeHandle:function(ev){

                //console.log(ev.target.value);

                this.setState({mes:ev.target.value});

            }

        });

        var obj = {

            user: '夺命雷公狗',

            sendname :'留言',

            values : '请输入留言的信息'

        }

        ReactDOM.render(<Firs {...obj} />, /*这里其实也可以使用双标签的如：<Fir></Fir>  */

            document.getElementById('demo'),

            function(){

                alert('页面渲染完成');

        });

    </script>

</body>

</html>

效果如下所示：

夺命雷公狗-----React---8--react官方提供的组建实现双向绑定的更多相关文章

  1. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  2. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  3. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  4. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  5. 夺命雷公狗-----React---7--组建的状态props和state

    props:组建初始要渲染的数据,他是不可以改变的 state:组建状态发生改变,调用render重新渲染数据 我们来写一个例子: <!DOCTYPE html> <html lan ...

  6. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 夺命雷公狗-----React---5--props对象的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  8. 夺命雷公狗-----React---4--props变量的传递

    提示:props的值是不可以改变的... <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  9. 夺命雷公狗-----React---3--标签的规则

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Linux多线程实例练习 - pthread_exit() 与 pthread_join()

    Linux多线程实例练习 - pthread_exit 与 pthread_join pthread_exit():终止当前线程 void pthread_exit(void* retval); pt ...

  2. Node.Js —— PM2介绍

    pm2 是一个带有负载均衡功能的Node应用的进程管理器.当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的.它非常适合IaaS结构,但不要把它用于 ...

  3. [LintCode] Length of Last Word 求末尾单词的长度

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  4. [LintCode] Wiggle Sort 扭动排序

    Given an unsorted array nums, reorder it in-place such that nums[0] <= nums[1] >= nums[2] < ...

  5. 练习一：SQLite基本操作

    一.基础知识: 运用场景: 1>应用运行需要保存一系列有一定关系有一定结构的数据(文本也可以但是存储效率低) 2>文件类型:.db(一个数据库就是一个.db文件) 3>路径:/dat ...

  6. centos7 服务管理

    服务脚本位置: /usr/lib/systemd/system  (开机不登录就能够运行的服务) /usr/lib/systemd/user      (用户登录后才能运行的服务) 服务脚本示例: [ ...

  7. ETL

     1.ETL的定义 ETL分别是“Extract”.“ Transform” .“Load”三个单词的首字母缩写也就是“抽取”.“转换”.“装载”,但我们日常往往简称其为数据抽取. ETL是BI/DW ...

  8. Jquery dialog属性

    修改标题: $('#test').dialog("option","title", "测试").dialog('open'); 修改位置: ...

  9. zk 隐藏网页文件后缀

    前台(test.zul): <a label="隐藏地址" href="/Bandbox/test.html"/> web.xml添加 <se ...

  10. 将文件系统数据库迁移到ASM中

    使用裸设备配置ASM实例 http://www.cnblogs.com/myrunning/p/4270849.html 1.查看我们创建的磁盘组 [oracle@std ~]$ export ORA ...