1、事件绑定

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同:

• React 事件的命名采用小驼峰式，而不是纯小写。

onClick  onChange

• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

onClick={this.fn}

• 类组件与函数组件绑定事件是差不多的，只是在类组件中绑定事件函数的时候需要用到this，代表指向当前的类的引用，在函数中不需要调用this

export default class extends React.Component {
    clickHandle(e){
        console.log('点了')
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

const Items=({title,num})=>{
    const fn=()=>{
        console.log('hggg')
    }
    return(
        <div>
            <h2>{title}</h2>
            <button onClick={fn}></button>
        </div>
    )
}

2、this指向问题

1. 直接在render里写行内的箭头函数(不推荐)

<button onClick={(evt) => this.fun(evt)}>按钮</button>

1. 直接在组件内定义一个非箭头函数的方法，然后在render里直接使用(不推荐)

<button onClick={this.fun.bind(this)}>按钮</button>

1. 在组件内使用箭头函数定义一个方法(推荐)

<button onClick={this.fun(evt)}>按钮</button>
 // 通过箭头函数定义事件方法，也能解决this指向问题
 fn = (evt) => {
     alert(123);
 }

1. 直接在组件内定义一个非箭头函数的方法，然后在constructor里bind(this)(推荐)

constructor(props){
    super(props)
    // 在构造方法中指定this指向  <button onClick={this.fun()}>按钮</button>
    this.fun = this.fun.bind(this)
}

3、事件对象

React中可以通过事件处理函数的参数获取到事件对象，它的事件对象叫做：合成事件
即兼容所有浏览器，无需担心跨浏览器兼容问题，此事件对象还拥有和浏览器原生事件相同的接口，包括 stopPropagation()和 preventDefault()
如果你想获取到原生事件对象，可以通过 e.nativeEvent 属性来进行获取

• 获取原生事件对象：e.nativeEvent
• 获取数值：e.target.value

export default class extends React.Component {
    clickHandle(e){
        // 获取原生事件对象
        console.log(e.nativeEvent)
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

4、事件的参数传递

1. 在render里调用方法的地方外面包一层箭头函数
2. 在render里通过this.handleEvent.bind(this, 参数)这样的方式来传递
3. 通过event传递
4. 比较推荐的是做一个子组件, 在父组件中定义方法，通过props传递到子组件中，然后在子组件件通过this.props.method来调用