React 受控组件和非受控组件

Posted 2020-11-15 iwishicould

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