非授控組件
使用ref來從 DOM 節點中獲取表單數據
表單數據將交由 DOM 節點來處理
非授控組件：先用先取

    //非受控組件：先用先取
    class Login extends React.Component {
     getSubmit=()=>{
     //阻止默認事件
     event.preventDefault()
     alert(`用戶名：${this.ipt.value},密碼：${this.iptT.value}`)
     }
      render() {
         return (
           <form action="https://developer.mozilla.org/" onSubmit={this.getSubmit}>
            姓名:<input ref={(a)=>{this.ipt=a}} type="text" name="username"/>
            密碼:<input ref={(b)=>{this.iptT=b}} type="password" name="password"/>
            <button>登錄</button>
           </form>
         )
      }
    }
   ReactDOM.render(<Login/>,document.getElementById("react"))

授控組件
表單組件的狀態/數據只由state 維護 修改只能通過setState()來更新,
表單數據是由 React 組件來管理

   //受控組件就是數據維護在狀態state中，當需要用的時候直接從狀態中取出
    class Login extends React.Component {
   //初始化狀態
   state={username:'', password:''}
   //自定義賦值事件
   getUserName=(event)=>{
      const {username} =this.state 
      this.setState({username:event.target.value})
    }
    getPassWord=(event)=>{
        const {password} =this.state
        this.setState({password:event.target.value})
    }
     getSubmit=()=>{
     //原生阻止默認事件
     event.preventDefault()
     const {password,username} =this.state
     alert(`姓名${username},密碼${password}`)
     }
      render() {
         return (
           <form onSubmit={this.getSubmit}>
            姓名:<input onChange={this.getUserName} type="text" name="username"/>
                <h2>{this.state.username}</h2>
            密碼:<input  onChange={this.getPassWord}  type="password" name="password"/>
                <h2>{this.state.password}</h2>
                <button>登錄</button>
           </form>
         )
      }
    }
   ReactDOM.render(<Login/>,document.getElementById("react"))

授控組件用高階函數與函數柯里化寫法

//高階函數，如果一個函數符合下面2個規范中的任何一個，那該函數就是高階函數
   //   1.若A函數，接收的參數是一個函數，那么A就可以稱高階函數
   //   2.若A函數，調用的返回值依然是一個函數，那么A就可以稱為高階函數
   //    常見的高級函數有：Promise,setTimeout,map()等等
   //函數的柯里化：通過函數調用繼續返回函數的方式，實現多次接收參數最后統一處理的函數編碼形式
    class Login extends React.Component {
   //初始化狀態
   state={username:'', password:''}
   //自定義賦值事件 ,這塊屬于高階函數，
   getData=(data)=>{
    // console.log(data) //username,password
    // const {username,password} =data
      return (event)=>{
        //console.log("@") //onChange每改變一次，返回值的函數會被調用一次
          return this.setState({
            [data]:event.target.value
          })
      }
   }
     getSubmit=()=>{
     //原生阻止默認事件
     event.preventDefault()
     const {username,password} =this.state
     alert(`姓名${username},密碼${password}`)
     }
      render() {
         return (
           <form onSubmit={this.getSubmit}>
                {/*這塊this.getData("username")加了（），onChange把getData函數的返回值作為回調，不加（），會把getData函數本身作為回調*/}
            姓名:<input onChange={this.getData("username")} type="text" name="username"/>
                 <h2>{this.state.username}</h2>
            密碼:<input  onChange={this.getData("password")}  type="password" name="password"/>
                <h2>{this.state.password}</h2>
                <button>登錄</button>
           </form>
         )
      }
    }
   ReactDOM.render(<Login/>,document.getElementById("react"))

授控組件不用函數柯里化的寫法

 class Login extends React.Component {
   //初始化狀態
   state={username:'', password:''}
   getData=(datatest,e)=>{
    this.setState({[datatest]:e}) 
   }
   getSubmit=()=>{
     //原生阻止默認事件
     event.preventDefault()
     const {username,password} =this.state
     alert(`姓名${username},密碼${password}`)
     }
      render() {
         return (
           <form onSubmit={this.getSubmit}>
                {/*這塊this.getData("username")加了（），onChange把getData函數的返回值作為回調，不加（），會把getData函數本身作為回調*/}
            姓名:<input onChange={(event)=>{return this.getData("username",event.target.value)}} type="text" name="username"/>
                 <h2>{this.state.username}</h2>
            密碼:<input onChange={event=>this.getData("password",event.target.value)} type="password" name="password"/>
                <h2>{this.state.password}</h2>
                <button>登錄</button>
           </form>
         )
      }

    }
   ReactDOM.render(<Login/>,document.getElementById("react"))