React 受控组件和非受控组件

需求
用户名自动获取 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>
        )
    }
}

 

上一篇:Java刷题笔记----->集合类


下一篇:Java容器-ConcurrentHashMap、LinkedHashMap、WeakHashMap