React 方法 事件

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
}

如有问题，望斧正，也欢迎交流，共同脱坑