react之事件处理

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>
   

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

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

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

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

4. 直接在组件内定义一个非箭头函数的方法，然后在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来调用