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
}

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