做时时彩网站被抓/百度快照客服人工电话

1 React 事件基础

1 简单描述: 
---------------------------------------------------------------------------------------1 所有事件, 都以 on开头 (包括自定义事件)  // onClick -- onAbc2 阻止默认事件的方式, 也是通过事件对象, 调用原生的 API

2 绑定事件方式

1 ES5 的方式: 
----------------------------------------------------------------------------------
class P1 extends React.Component{hh1() {console.log("hello")}  // 事件处理函数位置hh2(e) {console.log(e)}  // ES5 没有实参默认形参为事件对象hh3(a, b, c) {console.log(a, b, c)}  // 接收多个参数, 最后一个参数默认为事件对象render() {// do sometingreturn(<Fragment><button onClick={this.hh1.bind(this)}> 测试 1 </button>  // ES5 的方式尽量改变 this指向<button onClick={this.hh2.bind(this)}> 测试 2 </button>  <button onClick={this.hh3.bind(this, 1, 2)}> 测试 3 </button><Fragment/>)}
}
----------------------------------------------------------------------------------2 ES6 的方式 1
----------------------------------------------------------------------------------
class P2 extends React.Component{hh1() {console.log("hello")}  hh2(e) {console.log(e)}  hh3(e, a, b) {console.log(e, a, b)} render() {// do sometingreturn(<Fragment><button onClick={()=>this.hh1()}> 测试 1 </button> <button onClick={(e)=>this.hh2(e)}> 测试 2 </button>  // 传事件对象的方式<button onClick={(e)=>this.hh3(e, 1, 2)}> 测试 3 </button>  //传实参<Fragment/>)}
}
----------------------------------------------------------------------------------3 ES6 的方式 2  
----------------------------------------------------------------------------------
class P3 extends React.Component{hh1 = () => {console.log("hello")}hh2 = (e) => {console.log(e)}    // 也可以接收默认事件对象render() {// do sometingreturn(<Fragment><button onClick={this.hh1()}> 测试 1 </button>  //注意加()会直接执行, 正常定义是不加()的<button onClick={this.hh2()}> 测试 2 </button><Fragment/>)}
}
----------------------------------------------------------------------------------4 直接绑定业务操作  //可用于类组件
----------------------------------------------------------------------------------
function A1(props) {// do somethingreturn (<Fragment><button onClick={ (e)=>{console.log(e)} }> 测试 1 </button><Fragment/>)
}
----------------------------------------------------------------------------------5 函数式组件绑定事件的方式
----------------------------------------------------------------------------------
function A1(props) {// do somethingreturn (<Fragment><button onClick={()=>ck1()}></button><Fragment/>)
}
----------------------------------------------------------------------------------