032 react中的事件處理

1. 通過onXXX屬性指定事件處理函式（注意大小寫）—為了更好的相容性
   1. react使用自定義合成事件，而不是使用原生的DOM事件
   2. react中的事件是事件委託（委託給元件最外層的元素）—為了高效
2. 通過event.target 得到發生事件的DOM元素 ——不要過度使用ref

不要過度使用refs

refs很多時候可以省略

<div>
          <input ref = {this.myRef} type="text" placeholder = "點選按鈕提示資料"/>&nbsp;
          <button  onClick = {this.showData}>點我提示左側資料</button> &nbsp;
          <input  onBlur={this.showData2} type="text" placeholder = "渲染元件到頁面"/>&nbsp;
          </div>
      )
    }
    showData = ()=>{
      console.log(this.myRef);
    }
    // 當發生事件的元素和需要操作的元素是一個元素可以省略 ref
    //沒有refs，react事件可以自動將事件源作為引數
    showData2 = (event)=>{
      console.log(event.target.value);
    }
  }
 

033 非受控元件

現用現取 就是非受控

class Login extends React.Component{
      handleSubmit = (event)=>{
        // 阻止表單提交
        event.preventDefault();
        const {username,password} = this
        alert(`username:${username.value},password:${password.value}`)
      }
      render(){
        return(
          <form action="<http://www.atguigu.com>" onSubmit={this.handleSubmit} >
            使用者名稱: <input ref={c=>this.username=c} type="text" name = 'username'/>
            密碼: <input ref={c=>this.password=c} type="password" name='password' />
            <button>登入</button>
          </form>
        )
      }
    }
 

不推薦refs

034 受控元件

class Login extends React.Component{
      state = {
        username:'',
        password:'',
      }
//這裡的event是react幫我們維護的
      handleSubmit = (event)=>{
        // 阻止表單提交
        event.preventDefault();
        const {username,password} = this.state
        alert(username,password)
      }
      saveUsername = (e)=>{
        this.setState({username:e.target.value})
      }
      savePassword = (e)=>{
        this.setState({password:e.target.value})
      }
      // 頁面所有輸入類的DOM[比如input]隨著輸入維護到狀態中，等需要用的時候再取出來
      render(){
        return(
          <form action="<http://www.atguigu.com>" onSubmit={this.handleSubmit} >
            使用者名稱: <input onChange={this.saveUsername} type="text" name = 'username'/>
            密碼: <input  onChange={this.savePassword} type="password" name='password' />
            <button>登入</button>
          </form>
        )
      }
    }
 

類似Vue中的雙向資料繫結 推薦使用受控元件，省略掉refs

035 優化和函式柯里化

class Login extends React.Component{
      state = {
        username:'',
        password:'',
      }
      handleSubmit = (event)=>{
        // 阻止表單提交
        event.preventDefault();
        const {username,password} = this.state
        alert(username,password)
      }
      saveFormData = (dataType)=>{
        //這個dataTyp就是一個引數，這裡運用到了柯里化，函式裡面返回函式
        console.log(dataType);
        return (event)=>{
          //this.setState({dataType:event.target.value}) 這是錯誤的，在state裡面都是字串形式 dataType和'dataType'一樣的
          this.setState({[dataType]:event.target.value})
        }
      }
      // 頁面所有輸入類的DOM[比如input]隨著輸入維護到狀態中，等需要用的時候再取出來
      render(){
        return(
          <form action="<http://www.atguigu.com>" onSubmit={this.handleSubmit} >
            使用者名稱: <input onChange={this.saveFormData('username')} type="text" name = 'username'/>
            密碼: <input  onChange={this.saveFormData('password')} type="password" name='password' />
            <button>登入</button>
          </form>
        )
      }
    }

036 非柯里化的寫法

使用者名稱: <input onChange={(event)=>{this.saveFormData('username'),event}} type="text" name = 'username'/>