react入門

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="十七-vikang" />
        <title>十七 - http://www.lxweimin.com/u/626b6b7f6b78</title>
        <script src="js/react.js"></script>       <!--這里需要注意引入了三個-->
        <script src="js/react-dom.js"></script>     
        <script src="js/browser.min.js"></script>
        <script type="text/babel">                   <!--這里需要將text/javascript改為text/babel-->
            //定義一個組件，我命名為A（首字母大寫），類里面的方法后面不加‘；’
            class A extends React.Component{
                //一個方法constructor，為了初始化
                constructor(...args){
                     //超類super代表的是父類的構造函數，必須調用，為了先完成父類構造的相關工作，要把參數都傳給父類可以用Arguements
                    super(...args);
                    //在這里初始化狀態
                    this.state={value:''};
                }
                //修改狀態自寫的一個方法，命名隨意，在此我叫text
                text(ev){
                    //修改狀態要用setState
                    this.setState({
                        //target就是指的發生事件的那個對象
                        value:ev.target.value
                    })
                }
                //方法之一，渲染的作用
                render(){
                    //需要注意這里return的div這個父級元素有且只能有一個，里面可以包很多。
                    return <div>
                        //text不是函數而是方法，需要加上this，后面用bind(this)為了防止this混亂；還有這里的事件不可以小寫成onchange，注意所有事件的大小寫
                        <input type="text" onChange={this.text.bind(this)}/><br />
                        //用模板將數據輸出
                        <span>{this.state.value}</span>
                    </div>  
                }
                
            };
            window.onload=function(){
                var oBox=document.getElementById('box');
                ReactDOM.render(
                    <A/>,         //渲染的東西，組件在這里當單標簽用
                    oBox          //渲染到哪里
                );
            };
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容