zoukankan      html  css  js  c++  java
  • 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她。。

    <!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>

    效果如下所示:

  • 相关阅读:
    后缀数组/LCP
    Manachar's Algorithm
    自动AC机qwq(大雾)以及trie图fail图的一些结论
    平衡树有关题目小结
    洛谷日报索引(转)
    初始化函数的简单写法
    关于对拍
    第12组 Alpha冲刺(4/6)
    第12组 Alpha冲刺(3/6)
    第12组 Alpha冲刺(2/6)
  • 原文地址:https://www.cnblogs.com/leigood/p/6068024.html
Copyright © 2011-2022 走看看