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>
    
    
    
    学无止境,谦卑而行.
  • 相关阅读:
    旋转变换(一)旋转矩阵
    DICOM中几个判断图像方向的tag
    RGB与HSB之间的转换公式
    Delphi图像处理 -- RGB与HSL转换
    指针类型(C# 编程指南)
    关于 Delphi 中流的使用(2) 用 TFileStream(文件流) 读写
    [转载]Delphi Tokyo 10.2.3发布了
    如果设置网络优先级
    .gitignore详解
    Win10 兼容性 Visual studio web应用程序 ASP.NET 4.0 尚未在 Web 服务器上注册
  • 原文地址:https://www.cnblogs.com/wangyang0210/p/14447934.html
Copyright © 2011-2022 走看看