zoukankan      html  css  js  c++  java
  • React 受控组件和非受控组件(1-1)

    需求
    用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont
    =event.target.value;//获取用户的值 ref获取值的另外一种用法 密码: <input type="password" ref={this.Myrefs}></input> Myrefs = React.createRef();//创建一个承装ref的容器 Myrefs一致 let pwd = this.Myrefs.current consolr.log(pwd)
    import React, { Component } from "react"
    export default class Login extends Component {
        
        state={
            username:""
        }
    
       
        changecon = (event) => { //event是某个被绑定的事件  可以使用它代替ref
          let usercont=event.target.value;//获取用户的值
          this.setState({
              username: usercont
          })
          console.log(this.state.username)
        }
    
        Myrefs = React.createRef();//创建一个承装ref的容器 Myrefs一致
        subcon=(event)=>{
         event.preventDefault()
            let pwd = this.Myrefs.current
            alert(pwd.value)
        }
    
        // 用户名是受控组件 :会自动维护state
        // 密码框是 非受控组件  :不会自动维护state
    
        render() {
            return (
                <div>
                    <form>
                        {/* onChange用户状态发生改变  就获取值   就是时时获取值 使用onChange */}
                        用户名:<input type="text" onChange={this.changecon}></input>
                        密码: <input type="password" ref={this.Myrefs}></input>
                        <button onClick={this.subcon}>按钮</button>
                    </form>
                  
                </div>
            )
        }
    }
  • 相关阅读:
    c# DateTime 格式化输出字符串
    计算运行时长
    ubuntu helpers
    json.net omit member
    git 本地项目关联新repo
    c# DirectoryEntry LDAPS
    为视图或函数指定的列名比其定义中的列多
    Java反序列化漏洞学习笔记
    流量抓包
    软件安全策略-下
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11619316.html
Copyright © 2011-2022 走看看