React 方法
方法中不涉及this的,就按正常的写法;如果涉及,则改变this指向
下面列举3种方式
- 1 调用方法时bind(this)
getMsg(){
alert(this.state.msg)
}
<button onClick={this.getMsg.bind(this)}>按钮</button>
// 不要this.getMsg() 不然每次页面刷新,不要点击,自己先触发
- 2 constructor bind(this)
constructor(props){
super(props)
this.state={
msg:"sssss"
}
this.run = this.run.bind(this);
}
run(){
alert(this.state.msg)
}
<button onClick={this.run>按钮</button>
- 3 箭头函数,最常用的
run=()=> {
alert(this.state.name)
}
<button onClick={this.run>按钮</button>
// 箭头函数中没有this的概念
之前写React Native的时候有这种写法,亲测有效
getMsg(){
alert(this.state.msg)
}
<button onClick={()=>this.getMsg()}>按钮</button>
React 事件
事件对象
- 在触发DOM上的某个事件时,会产生一个事件event,这个对象中包含着所有与事件相关的信息。console.log(e) ,console.log(e.target)获取DOM
<button onClick={this.getMsg}>按钮</button>
获取DOM,修改属性
e.target.style.background="yellow"
插入小程序的操作DOM
<button cid="d1" onClick={this.getMsg}>按钮</button>
e.target.getAttribute("cid") //d1
表单事件
1.监听表单值改变 onChange
2.在onChange对应的方法中获取输入的值 e.targe.value
3.表单的值赋值 setState e.targe.value
除了事件对象,还有ref获取DOM
var name=this.refs.input.value
<input type="text" ref="input"/>
键盘事件
onKeyUp e.keyCode
表单回车提交
if(e.keyCode==13){
// e.target.value
}