zoukankan      html  css  js  c++  java
  • React——受控组件和非受控组件【八】

    前言

    react中的受控组件和非受控组件

    内容

    定义一个包含表单的组件,输入用户名密码后, 点击登录提示输入信息

    理解

    包含表单组件的分类非受控组件,受控组件

    非受控组件

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <!--创建"容器"-->
    <div id="login"></div>
    
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom,用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Login extends React.Component {
    
            handleSubmit = (event) => {
                event.preventDefault() //阻止表单提交
                const {username, password} = this
                alert(`你输入的用户名是: ${username.value}, 你输入的密码是: ${password.value}`)
            }
    
            render() {
                return (
                    <div>
                        <form onSubmit={this.handleSubmit}>
                            用户名: <input ref={ c => this.username = c } name="username" type="text"/>
                            密  码: <input ref={ c => this.password = c } name="password" type="password"/>
                            <button>登录</button>
                        </form>
                    </div>
                );
            }
    
    
        }
    
        ReactDOM.render(<Login />, document.getElementById('login'))
    </script>
    </body>
    </html>
    
    

    受控组件

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <!--创建"容器"-->
    <div id="login"></div>
    
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom,用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Login extends React.Component {
    
            state = {
                username: "",
                password: ""
            }
    
            saveUserName = (event) => {
                this.setState({username:event.target.value})
            }
    
            savePassword = (event) => {
                this.setState({password:event.target.value})
            }
    
    
            handleSubmit = (event) => {
                event.preventDefault() //阻止表单提交
                const {username, password} = this.state
                alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
            }
    
            render() {
                return (
                    <div>
                        <form onSubmit={this.handleSubmit}>
                            用户名: <input onChange={this.saveUserName} name="username" type="text"/>
                            密  码: <input onChange={this.savePassword} name="password" type="password"/>
                            <button>登录</button>
                        </form>
                    </div>
                );
            }
        }
    
        ReactDOM.render(<Login />, document.getElementById('login'))
    </script>
    </body>
    </html>
    
    

    函数柯里化

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <!--创建"容器"-->
    <div id="login"></div>
    
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react-dom,用于支持react操作DOM-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Login extends React.Component {
    
            state = {
                username: "",
                password: ""
            }
    
            saveFormData = (dataType) => {
                return (event) => {
                    this.setState({[dataType]:event.target.value})
                }
            }
    
    
    
            handleSubmit = (event) => {
                event.preventDefault() //阻止表单提交
                const {username, password} = this.state
                alert(`你输入的用户名是: ${username}, 你输入的密码是: ${password}`)
            }
    
            render() {
                return (
                    <div>
                        <form onSubmit={this.handleSubmit}>
                            用户名: <input onChange={this.saveFormData('username')} name="username" type="text"/>
                            密  码: <input onChange={this.saveFormData('password')} name="password" type="password"/>
                            <button>登录</button>
                        </form>
                    </div>
                );
            }
        }
    
        ReactDOM.render(<Login />, document.getElementById('login'))
    </script>
    </body>
    </html>
    
    
    
    学无止境,谦卑而行.
  • 相关阅读:
    大数据学习笔记01
    寻址方式
    指令格式
    虚拟存储器
    高速缓冲存储器Cache
    双端口RAM和多模块存储器
    主存储器与CPU的连接
    半导体存储器
    存储系统——基本概念
    算术逻辑单元
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/14447934.html
Copyright © 2011-2022 走看看