首先要引入她。。

<!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. php关于金额比较引发的问题（转）

    做电子商务的时候一般会涉及到金额的比较,按正常的思路来看用><=这些个符号就可以了.可是要是到程序上来搞这个的话就出大事了.现在看下这段代码: $f = 0.07; var_dump($f ...

  2. filter,orderBy等过滤器

    filter用法比较灵活(也增加了较高的复杂度),单独列出. 基本的用法: <input type="text" class="search" ng-mo ...

  3. Qt Write and Read XML File 读写XML文件

    在Qt中,我们有时候需要把一些参数写入xml文件,方便以后可以读入,类似一种存档读档的操作,例如,我们想生成如下的xml文件: <?xml version="1.0" enc ...

  4. Point Grey articles link

    Point Grey areaDetector driver Bumblebee XB3 Specifications FlyCapture SDK Example Source Code Under ...

  5. thinkphp关联模型的用法

    HAS_ONE(值得注意的是,这是主动关联,外键必须是被关联的表): <?php namespace Home\Model; use Think\Model\RelationModel; cla ...

  6. HDU1058 DP

    Humble Numbers Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  7. 队列的C++实现（数组）——创建-进队-出队-返回队首元素-清空队列栈-处理队列

    队列的数组实现,从队尾进入,对头删除. 队列长度用标志变量size,它是独立于front和rear的一个变量.size == 0,队列为空.size == capacity,满队列. 一.结点声明 s ...

  8. hdu1201-18岁生日

    Gardon的18岁生日就要到了,他当然很开心,可是他突然想到一个问题,是不是每个人从出生开始,到达18岁生日时所经过的天数都是一样的呢?似乎并不全都是这样,所以他想请你帮忙计算一下他和他的几个朋友从 ...

  9. eval 与 Function

    var json='{"name":"lee","age":"15"}' function test () { var ...

  10. 奥迪--A4L

    -型号:A4L -价格:30-41W -动力:2T -变速箱:7挡双离合 -长宽高:4.81,1.84,1.43 -油箱:54L -发动机:EA888 -大灯:氙气(选装LED)