非授控組件
使用ref來從 DOM 節(jié)點中獲取表單數(shù)據(jù)
表單數(shù)據(jù)將交由 DOM 節(jié)點來處理
非授控組件：先用先取

    //非受控組件：先用先取
    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"))

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

   //受控組件就是數(shù)據(jù)維護在狀態(tài)state中，當(dāng)需要用的時候直接從狀態(tài)中取出
    class Login extends React.Component {
   //初始化狀態(tài)
   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"))

授控組件用高階函數(shù)與函數(shù)柯里化寫法

//高階函數(shù)，如果一個函數(shù)符合下面2個規(guī)范中的任何一個，那該函數(shù)就是高階函數(shù)
   //   1.若A函數(shù)，接收的參數(shù)是一個函數(shù)，那么A就可以稱高階函數(shù)
   //   2.若A函數(shù)，調(diào)用的返回值依然是一個函數(shù)，那么A就可以稱為高階函數(shù)
   //    常見的高級函數(shù)有：Promise,setTimeout,map()等等
   //函數(shù)的柯里化：通過函數(shù)調(diào)用繼續(xù)返回函數(shù)的方式，實現(xiàn)多次接收參數(shù)最后統(tǒng)一處理的函數(shù)編碼形式
    class Login extends React.Component {
   //初始化狀態(tài)
   state={username:'', password:''}
   //自定義賦值事件 ,這塊屬于高階函數(shù)，
   getData=(data)=>{
    // console.log(data) //username,password
    // const {username,password} =data
      return (event)=>{
        //console.log("@") //onChange每改變一次，返回值的函數(shù)會被調(diào)用一次
          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函數(shù)的返回值作為回調(diào)，不加（），會把getData函數(shù)本身作為回調(diào)*/}
            姓名:<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"))

授控組件不用函數(shù)柯里化的寫法

 class Login extends React.Component {
   //初始化狀態(tài)
   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函數(shù)的返回值作為回調(diào)，不加（），會把getData函數(shù)本身作為回調(diào)*/}
            姓名:<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"))