React中的事件处理

点击事件

先定义一个要调用的函数，类组件中写在render外面，与render评级就好

handleDecrease(){
  console.log('---')
}

调用方法

<button onClick={this.handleDecrease} type="button" className="btn btn-primary"> - </button>

注意点：

• 点击事件用onClick调用
• onClick后要用{}写要调用的函数，也可以直接写函数
• onClick={this.handleDecrease} 不能写成 onClick={this.handleDecrease()}，因为加了()之后页面一加载函数就会立即执行

onClick调用的函数也会带有一些信息，可以通过参数获取

handleDecrease(ev){
  console.log('---',ev)
}

==函数调用如果采用this的话可能会有this指向问题，即this指向为空（面向对象写法的问题，非react特有）==

解决方法：

• 在jsx中使用bind方法

//定义两个函数
  doSomething(){
    count ++
  }

  handleDecrease(ev){
    console.log('---',ev)
    this.doSomething()
  }

//render中使用
 <button onClick={this.handleDecrease.bind(this)} type="button" className="btn btn-primary"> - </button>

• 在构造函数中使用bind方法

//类中定义constructor，并传入props参数
  constructor(props) {
    super(props);
    
    //将handleDecrease函数重定向后再赋回给handleDecrease
    this.handleDecrease = this.handleDecrease.bind(this)
  }

//定义两个函数
  doSomething(){
    count ++
  }

  handleDecrease(ev){
    console.log('---',ev)
    this.doSomething()
  }

//render中使用
 <button onClick={this.handleDecrease} type="button" className="btn btn-primary"> - </button>

• 使用箭头函数(推荐)

//定义两个函数
  doSomething(){
    count ++
  }
  
  //箭头函数总是指向定义时所在的对象，而不是运行时所在的对象
  handleDecrease = (ev)=>{ 
    console.log('---',ev)
    this.doSomething()
  }

//render中使用
<button onClick={this.handleDecrease} type="button" className="btn btn-primary"> - </button>

向事件处理程序传递参数

使用bind方法

//bind中传递的参数在函数中可以通过参数获取
handleDecrease = (id)=>{
  console.log('id',id)
  count --
  this.doSomething()
}

//render中使用
<button onClick={this.handleDecrease.bind(this,this.props.data.id)} type="button" className="btn btn-primary"> - </button>

匿名箭头函数

//被调用函数函数不做变化
  handleDecrease = (id)=>{
    console.log('id',id)
    count --
    this.doSomething()
  }
  
//调用时使用匿名箭头函数传递参数值
  <button onClick={()=>{this.handleDecrease(this.props.data.id)}} type="button" className="btn btn-primary"> - </button>

==需要注意的是，如果函数需要传入事件对象的话，这么写是拿不到的，需要在调用的时候传入==

  handleDecrease = (id,ev)=>{
    console.log('id',id,ev)
    count --
    this.doSomething()
  }
  
//调用时使用匿名箭头函数传递参数值
  <button onClick={(ev)=>{this.handleDecrease(this.props.data.id,ev)}} type="button" className="btn btn-primary"> - </button>

传递参数给父组件

父组件

class App extends Component {
  renderList () {

    return listData.map(item => {
      return <ListItem key={item.id} data={item} onDelete={this.handleDelete}/>
    })
  }

  handleDelete = (id)=>{
    console.log('id:',id)
  }

  render () {
    return (
      <div className='container'>
        {/* {listData.map((item,idx)=>{
          return <ListItem key={idx} data={item} />
        })} */}
        {listData.length === 0 && <div className='text-center'>购物车是空的</div>}
        {this.renderList()}
      </div>
    )
  }
}

子组件
使用this.props.自定义指令名()传递参数

<button onClick={() => {this.props.onDelete(this.props.data.id)}} type="button" className="btn btn-danger btn-sm">删除</button>

React事件要素

• React是合成事件，不是DOM原生事件
• React在document监听所有支持事件
• 使用统一的分发函数dispatch去指定事件函数的执行