React 绑定事件 3

1 React 事件基础

1 简单描述: 
---------------------------------------------------------------------------------------
  1 所有事件, 都以 on开头 (包括自定义事件)  // onClick -- onAbc

  2 阻止默认事件的方式, 也是通过事件对象, 调用原生的 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 someting
    return(<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 someting
    return(<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 someting
    return(<Fragment>
	  <button onClick={
    
    this.hh1()}> 测试 1 </button>
	  <button onClick={
    
    this.hh2()}> 测试 2 </button>
    <Fragment/>)
  }
}
----------------------------------------------------------------------------------


4 直接绑定业务操作  //可用于类组件
----------------------------------------------------------------------------------
function A1(props) {
    
    
  // do something
  return (<Fragment>
	<button onClick={
    
     (e)=>{
    
    console.log(e)} }> 测试 1 </button>
  <Fragment/>)
}
----------------------------------------------------------------------------------


5 函数式组件绑定事件的方式
----------------------------------------------------------------------------------
function A1(props) {
    
    
  // do something
  return (<Fragment>
	<button onClick={
    
    ()=>ck1()}></button>
  <Fragment/>)
}
----------------------------------------------------------------------------------