事件
事件方法跟render方法是平级,因此能够直接写:函数
在render中建立一个button按钮,绑定事件跟js是同样的,都是onClick,可是不能用"",要用{}。
<button onClick={this.run}>run</button>
,直接在{}中this.run绑定方法,这样点击button就会执行,注意this.run后面不要加(),
若是添加了()表示执行方法,页面加载的时候直接执行。
this.获取数据的中this的指向问题
在正常使用若是直接在rendar中用this.state.msg是没有任何问题的,this
这样时候的this指向这个组件。也能够在return中添加{},在{}中写js,如:
注意console.log(this.state.msg)后面不能加";"。 若是在render中调用一个方法,这个方法去获取msg,这时候的this就指向的不是组织就会报错。
解决方法:
一、第一种方法:
this.getDate.bind(this)把当前组件的this对象传进去,这样就会解决this指向问题。
二、第二种方法:
直接在构造方法中指明this所指向的对象,其实跟第一种没有太大区别:3d
三、第三种方法:
ES6的方法,箭头函数:
这时候console.log()后面添不添加";"均可以。这时候的this指向当前的上下文,也就是当前组件对象。
改变state中的数据:
一、第一种方法: code
第一次执行run方法
先点击箭头函数按钮,再点击run按钮
二、第二种方法:
执行方法传值:
经过bind方法传值: cdn