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>

        )

    }

}