react state和绑定事件

64 阅读1分钟

在项目中使用state可以分为在constructor中和在其外部

标准写法时

class Person extends React.Component{
    constructor(props){
        this.state={key,value} 
        //bind生成改变函数指向的新函数,不执行
        this.xxx = this.xxx.bind(this) 
    }
    render(){
      //这里的xxx没有()因为只是把方法赋值给了click事件,
      //所以当触发时xxx内的this是undefined(class内局部严格模式),
      //在被点击时this指向undefined,
      return (<h1 onClick = {xxx}>{this.state.key}</h1>)\
    }
    xxx(){
        console.log(this)
    }

}

开发时写法

class Person extends [React.Component](http://React.Component){
    //利用class静态属性的特点,将state从原型上改变到实例上
    State = {}.                    
    render(){
        return (<h1 onClick = {xxx}>{this.state.key}</h1>)
    }
    //同样利用静态属性的方式,使用()=>的函数注册方式进行函数的书写,利用了此函数寻找this的方式
    xxx =()=>{

    }
}

类似于:

class xx
    constructor(a)
        this.a = a    //绑定在原型上
    }
    b = 5  //绑定在实例上
}

更改state的值 更改state值不可以使用 this.state.xx = xxxx的方式,这样不会触发视图的改变,需要使用内部方法 this.setState({key,value})