事件处理
事件绑定方式不同
直接对比一下传统html页面与React的区别:
<button onclick="handleClick()">
点击按钮
</button>
<button onClick={()=>this.handleClick()}>
点击按钮
</button>
阻止默认行为
class ActionLink extends React.Component{
handleClick(event){
event.preventDefault();
}
render(){
return (
<a href="#" onClick={(event)=>this.handleClick(event)}>
link
</a>
);
}
}
ReactDOM.render(
<ActionLink />,
document.getElementById("root")
);
这里我做一下总结,关于render
中如何调用自定义函数以及对应的自定义函数的编写:
function Clock(props){
function handleClick(event){
event.preventDefault();
}
return (
<a href='#' onClick={handleClick}>
点击后不跳转
</a>
);
}
组件定义方式
class Clock extends React.Component{
handleClick(event){
event.preventDefault();
}
render(){
return (
<a href='#' onClick={(event)=>this.handleClick(event)}>
点击后不跳转
</a>
);
}
}
这种方法是可行的,但是不被建议使用。推荐使用下面这两种形式:
形式1:
class Clock extends React.Component{
constructor(props){
super(props);
this.handleClick=this.handleClick.bind(this);
}
handleClick(){
var name=event.target.name;
alert(name);
}
render(){
return (
<button onClick={this.handleClick} name='hello'>
在handleClick中不需要传入event对象也能直接使用
</button>
);
}
}
上面使用了一句:this.handleClick=this.handleClick.bind(this)
,是把该Clock
对象传递进handleClick
函数中,所以才能直接调用event
。
形式2:
class Clock extends React.Component{
handleClick=()=>{
var name=event.target.name;
alert(name);
}
render(){
return(
<button name='hello' onClick={this.handleClick}>
格式略显复杂
</button>
);
}
}
handle=()=>{}
这样的形式,至于原因,则好像是因为=>
,这个单箭头函数,单箭头函数的语法如下:
(param1,param2,param3)=>{statements}
按照这样的思路,那么就是把整个handleClick=()
作为参数传递进了=>{}
中。