【 React - 1/100 】React绑定事件this指向问题--改变state中的值

/**
    *  报错:
    *  Cannot read property 'setState' of undefined
    *  原因: this指向不一致。btnAddCount中的this 和render中的this
    *  解决方法:
    *      方式一: 使用箭头函数 () => { }  箭头函数可以改变this指向,即谁调用,this指向谁
    *      方式二: 绑定函数时,添加 ‘ .bind(this)’  onClick={this.btnSubCount.bind(this)
    *
*      在 React 里面,要将类的原型方法通过 props 传给子组件,传统写法需要 bind(this),否则方法执行时 this 会找不到:

    <button onClick={this.handleClick.bind(this)}></button>
    或者

    <button onClick={() => this.handleClick()}></button>
    * */
   /*btnAddCount(){
       this.setState({
           // 不要直接修改state的值  this.state.count++
           count: this.state.count + 1
       })
   }*/
   btnAddCount =  () => {
       this.setState({
           // 不要直接修改state的值 this.state.count++
           count: this.state.count + 1
       });
   };
   btnSubCount(){
       this.setState({
           count: this.state.count - 1
       })
   }
   render() {
       return (
           <div>有状态组件:
               <h2>计数器: {this.state.count}</h2>
               <button onClick={this.btnAddCount}>+1</button>
               <button onClick={() => this.btnAddCount()}>+1</button>
               <button onClick={this.btnSubCount.bind(this)}>-1</button>
               <button onClick={() => {
                   this.setState({
                       count: this.state.count - 1
                   })
               }}>-1</button>
           </div>
       )
   }
}
// 渲染这个组件
ReactDOM.render(<StateUseDemo />, document.getElementById('root'));

##ES5 方法

 // ES5方法绑定this 在constructor中添加
    this.btnAddCount =  this.btnAddCount.bind(this);
posted @ 2019-12-01 12:29  CNYangx  阅读(318)  评论(1编辑  收藏  举报