React 框架中受控组件和非受控组件

1：在React 框架中 表单处理
   收集表单处理:  受控组件 和 非受控组件
 
   非受控组件: 表单数据将交由DOM节点处理, 表单的数据用现取, 从ref绑定数据DOM节点中获取表单数据。
----------------------------------------------------------
非受控组组件   创建组件 (使用类创建组件首字母必须要大些)
 // 准备一个容器
 <div id="test"></div>

class Login extends React.Component {
  // 表单处理事件
  handleSubmit = ()=> {
   event.preventDefault();  // 默认阻止事件
   let {username, password} = this;
   alert(`输入用户名是: ${username.value}, 输入的密码是: ${password.value}`)
  }
  // 必须要使用render 函数
  render() {
    return {   // 必须要有返回值, 返回值中可以书写jsx 语法; jsx 语法就是一个语法糖
      <form onSubmit={this.handleSubmit}>
         用户名: <input ref={c=> this.username = c } type="text" name="username"></input></br>
         密码: <input ref={ c =>this.password = c } type="password" name="password"></input></br>
         <button>登录按钮</button>
      </form>
    }
  }

 // 渲染组件到页面
 ReactDOM.render(<Login/>, docuemnt.gteElementById('test'))
}
--------------------------------------------------------------
受控组件   创建组件
// 准备一个容器
<div id="test"></div>

//创建组件
class Login extends React.Component {
  // 初始化状态
  state = {
    username: "",
    password: ""
  }
  // 处理表单
  handleSubmit = (event)=> {
    event.preeventDefault();   // 阻止默认事件
    let {username, password} = this.state;
    alert(`输入用户名称是: ${username}, 输入密码是: ${password}`)
  }  
  
  // 保存输入的用户名称
  saveUsername = ()=> {
    this.serState({username: event.target.value});
  }
  // 保存输入密码
  savePassword = ()=> {
     this.serState({password: event.target.value});
  }

  // 组件必须使用render 函数, 并且必须要有返回值 return
  render() {
    return {
        <form onSubmit={this.handleSubmit}>
         用户名: <input onChange={this.saveUsername} type="text" name="username"></input></br>
         密码: <input onChange={this.savePassword} type="password" name="password"></input></br>
         <button>登录按钮</button>
      </form>
    }
  }
 }

受控组件: 随着输入维护状态,表单数据有状态维护
---------------------------------------------------------------
非受控组件需要使用大量的ref,  官方推荐使用受控组件。
官方推荐说勿过度使用大量的ref 
非受控组件就是现用现取,  直接从绑定的数据中去就可以。
推荐使用 受控组件,  不用写 ref, 官方不让过度使用ref