組件化 - 實例

時間 2019-11-08

標籤組件實例简体版

原文原文鏈接

步驟：javascript

拆分組件：拆分界面，抽取組件

靜態組件： 經過組件實現靜態頁面 (無交互)

class APP extends React.Component{
    render(){
        return (
            <div>
                <h1>TodoList</h1>
                <AddTodo />
                <TodoUl />
            </div>
        )
    }
}

/**** 子組件 ****/
class AddTodo extends React.Component{
    render(){
        return (
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        )
    }
}
class  TodoUl React.Component{
    render(){
        return (
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        )
    }
}

/**** 組件渲染 ****/
ReactDOM.render(</>, document.getElementById("outer"));

渲染 DOM：

設置狀態數據： 實現交互，變成動態組件

數據的類型css

數據的名稱html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0"/>
        
        <style rel="stylesheet" type="text/css">
            .unSelectedAble {
                /* 內容不能夠被選中 */
                -webkit-user-select:none;
                -moz-user-select:none;
                -ms-user-select:none;
                user-select:none;
            }
            * {
                padding: 0;
                margin: 0;
            }
    
            a {
                text-decoration: none;
            }
    
            ul,
            ol {
                list-style: none;
            }
    
            input {
                outline: none;
            }
    
            img {
                display: block;
            }
    
            html,
            body {
                height: 100%;
                /* overflow: hidden; */
            }
    
            /**** Start ****/
            html {
                /* touch-action: none; */
            }
    
            #wrap {
                width: 100%;
                min-height: 100%;
        
                background-color: #96b377;
            }
    
            #content {
                width: 100%;
                padding-bottom: 50px;
                padding-top: 50px;
                padding-left: 50px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                
                font-size: 14px;
                background: darkgrey;
            }
    
            #footer {
                width: 100%;
                height: 50px;
                margin-top: -50px;
        
                background: chocolate;
                text-align: center;
                line-height: 50px;
            }

            button {
                height: 36px;
                margin: 20px;
                padding: 4px;
                
                color: #000;
                font-size: 18px;
                background-color: #94b5b2;
                border: 0 none;
                border-radius: 6px;
            }

            input {
                padding: 6px;
                font-size: 18px;
                margin: 0 2px;
                background-color: #b76f59;
                border: 0 none;
            }
        </style>
    </head>
    
    <body class="unSelectedAble">
        
        <!-- 模擬屏幕區域 -->
        <div id="wrap">
            
            <!-- 內容區域 -->
            <div id="content">
            
            </div>
        </div>
        
        <!-- 底部區域 -->
        <div id="footer">
            Copyright ©2019 耶夢加德
        </div>
        
        
        <!-- javascript 代碼 -->
        <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
        <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
        <script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
        <script type="text/babel">
            class APP extends React.Component{
                state = {
                    todos: [
                        "吃飯",
                        "睡覺",
                        "打豆豆"
                    ]
                };
                
                addTodo = (todo)=>{
                    const todoList = this.state.todos;
                    if(todo !== ""){
                        todoList.unshift(todo);
                        this.setState({
                            todos: todoList
                        })
                    }
                };
                
                render() {
                    const todos = this.state.todos;
                    return (
                        <div>
                            <h2>待辦事項</h2>
                            <ADDTODO size={todos.length} addTodo={this.addTodo} />
                            <TODOLIST todos={todos} />
                        </div>
                    )
                }
            }
            
            class ADDTODO extends React.Component{
                static propTypes = {
                    size: PropTypes.number.isRequired,
                    addTodo: PropTypes.func.isRequired
                };
                
                addTodo = ()=>{
                    const newTodo = this.refs.newTodo.value;
                    this.props.addTodo(newTodo);
                    this.refs.newTodo.value = ""
                };
                render() {
                    const size = this.props.size;
                    return (
                        <div>
                            <label>
                                <input type="text" ref="newTodo"/>
                            </label>
                            <button onClick={this.addTodo}>#{size} 增長</button>
                        </div>
                    )
                }
            }
            
            class TODOLIST extends React.Component{
                static propTypes = {
                    todos: PropTypes.array.isRequired
                };
                
                render() {
                    const todos = this.props.todos;
                    return (
                        <ul>
                            {todos.map(
                                (each)=>{
                                    return (
                                        <li>{each}</li>
                                    )
                                }
                            )}
                        </ul>
                    )
                }
            }
            
            ReactDOM.render(<APP/>, document.getElementById("content"))
        </script>
    </body>
</html>

登陸表單java

表單的收集react

手動收集web

自動收集babel

React 的 onChange 事件會實時觸發 dom

一類多元素數據收集 (參數擴展)ui

onChange=(event=>this.handleChange(event, username))this

onChange=(event=>this.handleChange(event, pwd))

優點：分散了數據處理壓力

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0"/>
        
        <style rel="stylesheet" type="text/css">
            .unSelectedAble {
                /* 內容不能夠被選中 */
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            
            * {
                padding: 0;
                margin: 0;
            }
            
            a {
                text-decoration: none;
            }
            
            ul,
            ol {
                list-style: none;
            }
            
            input {
                outline: none;
            }
            
            img {
                display: block;
            }
            
            html,
            body {
                height: 100%;
                /* overflow: hidden; */
            }
            
            /**** Start ****/
            html {
                /* touch-action: none; */
            }
            
            #wrap {
                width: 100%;
                min-height: 100%;
                
                background-color: #96b377;
            }
            
            #content {
                width: 100%;
                padding-bottom: 50px;
                padding-top: 50px;
                padding-left: 50px;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                
                font-size: 14px;
                background: darkgrey;
            }
            
            #footer {
                width: 100%;
                height: 50px;
                margin-top: -50px;
                
                background: chocolate;
                text-align: center;
                line-height: 50px;
            }
            
            button {
                height: 36px;
                margin: 20px;
                padding: 4px;
                
                color: #000;
                font-size: 18px;
                background-color: #94b5b2;
                border: 0 none;
                border-radius: 6px;
            }
            
            input {
                padding: 6px;
                font-size: 18px;
                margin: 0 2px;
                background-color: #b76f59;
                border: 0 none;
            }
        </style>
    </head>
    
    <body class="unSelectedAble">
        
        <!-- 模擬屏幕區域 -->
        <div id="wrap">
            
            <!-- 內容區域 -->
            <div id="content">
            </div>
        </div>
        
        <!-- 底部區域 -->
        <div id="footer">
            Copyright ©2019 耶夢加德
        </div>
        
        
        <!-- javascript 代碼 -->
        <script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
        <script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
        <script src="https://cdn.bootcss.com/prop-types/15.6.2/prop-types.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>
        <script type="text/babel">
            class APP extends React.Component{
                state = {
                    uName: "admin",
                    uPWD: "123456"
                };
                
                login = ()=>{
                    const {uName, uPWD} = this.state;
                    alert(`AJAX :  uName=${uName}&uPWD=${uPWD}`);
                };
                
                handleChange = (event, type)=>{
                    const newValue = event.target.value;
                    this.setState({
                        [type]: newValue
                    })
                };
                
                render(){
                    const {uName, uPWD} = this.state;
                    return(
                        <div>
                            <label>用戶名 ：
                                <input
                                    type="text"
                                    defaultValue={uName}
                                    onChange={event=>this.handleChange(event, "uName")}
                                />
                            </label><br/>
                            
                            <label>密&nbsp;&nbsp;碼 ：
                                <input
                                    type="password"
                                    defaultValue={uPWD}
                                    onChange={event=>this.handleChange(event, "uPWD")}
                                />
                            </label><br/>
                            
                            <button onClick={this.login}>登陸</button>
                        </div>
                    )
                }
            }
            console.log(window.login);
            ReactDOM.render(<APP/>, document.getElementById("content"))
        </script>
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。