React 中事件处理

事件处理

// 传统
<button onclick="handleClick">click</button> 
// React
<button onClick={handleClick}>click</button>

1. react 事件的命名采用小驼峰式，而不是纯小写。
2. 使用JSX语法需要传入一个函数作为事件处理函数，而不是字符串。

注意

react中不能通过return false 的方式阻止默认行为。需要使用preventDefault。

function RouteLink(){
  function handleClick(e){
    e.preventDefault();
    console.log('return')
  }
  return(
  	<a href="#" onClick={handleClick}>skip</a>
  )
}

JSX回调函数中的this，在JavaScript中，class 的方法默认不会绑定this。如果没有绑定并把它传入onClick，这时this 的值为undefined

两种解决方法

使用实验性的public class field语法，

class Click extends React.component{
  handleClick= ()=>{
    console.log('public class fields')
  }
  
  render(){
    return(
    	<button onClick={this.handleClick}>
      	Click
      </button>
    )
  }
}

在回调中使用箭头函数

class Click extends React.component{
  handleClick(){
    console.log('箭头函数')
  }
  
  render(){
    return(
    	<button onClick={()=> this.handleClick()}>
      	Click
			</button>
    )
  }
}

向事件处理程序传递参数

<button onClick={(e)=> this.clickHandle(id,e)}>click</button>
<button onClick={this.clickHandle.bind(this,id)}>click</button>

---

点赞 评论 收藏 ~~ 今天的React学习到这结束了 ~~ 点赞 评论 收藏