014-015 react中的事件繫結和this指向

通過ComponentReact 可以檢視元件裡面的狀態

react中繫結函式，要用花括弧把函式名傳給onClick , react中所有的標籤屬性名都需要駝峰

<script type="text/babel">
    // 1. 建立元件
    class Weather extends React.Component{
      constructor(props){
        super(props)
        // react要求我們使用 物件表示state
          this.state = {
            isHot:false,
          }
      }
      render(){
        //讀取狀態
        const {isHot} = this.state 
        //react中繫結函式，要用花括弧把函式名傳給onClick  , react中所有的標籤屬性名都需要駝峰
        return <h2 onClick = {demo}>今天好{isHot?'炎熱':'涼爽'}</h2>
      }
    }
    //2. 渲染元件
    ReactDOM.render(<Weather/>,document.getElementById('test'))

    function demo(){
      console.log('被點選');
      //console.log(this.state); 通過Babel渲染拿不到window，這個裡面指向undefined
    }
 

<script type="text/babel">
    // 1. 建立元件
    class Weather extends React.Component{
      constructor(props){
        super(props)
        // react要求我們使用 物件表示state
          this.state = {
            isHot:false,
          }
      }
      render(){
        const {isHot} = this.state  //讀取狀態
        //react中繫結函式，要用花括弧把函式名傳給onClick  , react中所有的標籤屬性名都需要駝峰
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎熱':'涼爽'}</h2>
      }
       changeWeather(){
        //changeWeather放在了weather原型上，所以changeWeather的this指向Weather例項
        console.log('被點選');
        //console.log(this.state.isHot); this會丟失 這個裡面的this是undefined
        //由於changeWeather是作為onClick的回撥，所以不是通過例項呼叫，是直接呼叫
        // 類中的方法預設開啟了局部嚴格模式，所以changeWeather中的this為undefined 
      }
    }
    //2. 渲染元件
    ReactDOM.render(<Weather/>,document.getElementById('test'))
 

016 解決類中的this指向

在類中定義方法時加入一個方法，使原型鏈上的this通過bind改變指向例項本身，這樣在onClick傳遞的回撥函式中就不會指向undefined

class Weather extends React.Component{
      constructor(props){
        super(props)
          this.state = {
            isHot:false,
          }
          this.changeWeather = this.changeWeather.bind(this) //例項物件自身多了個方法， 構造器中this就是例項物件
      }
      render(){
        const {isHot} = this.state 
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎熱':'涼爽'}</h2>
      }
       changeWeather(){
        console.log(this.state);
        console.log('被點選');
      }
    }
    //2. 渲染元件
    ReactDOM.render(<Weather/>,document.getElementById('test'))
 

017 setState中的使用

react中資料不能直接更改【和Vue區分開】

需要藉助一個內建API去更改setState

構造器呼叫幾次 --構造器只會執行一次【只生成了一個Weather例項】

render呼叫幾次 --1+n次 1是初始化的那次，n是狀態更新的次數

// 1. 建立元件
    class Weather extends React.Component{
      //構造器呼叫幾次 --構造器只會執行一次【只生成了一個Weather例項】
      constructor(props){
        super(props)
          this.state = {
            isHot:false,
            wind:"微風"
          }
          this.changeWeather = this.changeWeather.bind(this) 
      }
      //render呼叫幾次 --1+n次 1是初始化的那次，n是狀態更新的次數
      render(){
        const {isHot,wind} = this.state 
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎熱':'涼爽'},{wind}</h2>
      }
       changeWeather(){
        //this.state.isHot = !this.state.isHot 這裡改不出來，因為不是雙向繫結。如果是Vue就可以
        this.setState({isHot:!this.state.isHot}) //狀態更新必須通過setState
      }
    }
    //2. 渲染元件
    ReactDOM.render(<Weather/>,document.getElementById('test'))

018 state的簡寫方式—019 總結state

類中可以直接寫賦值語句

class Car{
  constructor(name){
    this.name = name
  }
  price = 199 //直接在類中賦值語句  等同於在構造器中this.price = 199
}

// 1. 建立元件
    class Weather extends React.Component{
      // 初始狀態 
      state = {
            isHot:false,
            wind:"微風"
          }  
      render(){
        const {isHot,wind} = this.state 
        return <h2 onClick = {this.changeWeather}>今天好{isHot?'炎熱':'涼爽'},{wind}</h2>
      }
      //使用賦值的方式把方法放在了自己例項上  使用箭頭函式其中的this指向的是例項物件
      // 自定義方法--要用複製語句的形式+箭頭函式
       changeWeather = ()=>{
         console.log(this);//指向例項物件
        this.setState({isHot:!this.state.isHot}) //狀態更新必須通過setState
      }
    }