React组件中的事件
1.特点方法名称:React中采用了驼峰命名法,从第二个单词的字母开始大写原生js的写法是全部小写vue中是通过v-on:加上触发事件(也是全小写的,但是没有on)传值:React中事件接受的值是一个方法,需要用{}包裹起来原生js的事件接受的值是一个字符串vue中的事件接受的值是一个字符串(方法名称)2.事件的默认参数class EventTest extends Rea...
·
1.特点
- 方法名称:
React中采用了驼峰命名法,从第二个单词的字母开始大写
原生js的写法是全部小写
vue中是通过v-on:加上触发事件(也是全小写的,但是没有on) - 传值:
React中事件接受的值是一个方法,需要用{}包裹起来
原生js的事件接受的值是一个字符串
vue中的事件接受的值是一个字符串(方法名称)
2.事件的默认参数
class EventTest extends React.Component{
constructor(){
super()
this.state={
}
}
render(){
return (
<div>
<button onClick={this.click}>点击</button>
</div>
)
}
click=(e)=>{
console.log(e)
}
}
像这里的e参数,在触发这个事件时并没有传递一个参数给这个函数,但是它仍会有一个默认参数
这个默认参数就是触发这个事件的元素
传递其他参数的方式:
class EventTest extends React.Component{
constructor(){
super()
this.state={
}
}
render(){
return (
<div>
<button onClick={(e)=>this.click(e,'其他参数')}>点击</button>
</div>
)
}
click=(e,arg)=>{
console.log(e)
console.log(arg)
}
}
这里还可以使用匿名函数来实现,不过匿名函数
因为在React中事件接收的值必须是一个函数,而这个函数会有一个默认的参数,如果想传递其他参数,就必须先用一个匿名函数或箭头函数来接收这个参数(当然也可以不接收),然后再调用组件中的方法
3.阻止事件的默认操作
class EventTest extends React.Component{
constructor(){
super()
this.state={
}
}
render(){
return (
<div>
<a href="http://www.baidu.com" onClick={this.click}>点击</a>
</div>
)
}
click=(e)=>{
e.preventDefault()
}
}
在React中需要在事件调用的方法中加上 e.preventDefault()
在原生js中,直接在事件调用的方法加上return false
就可以了
在vue中在标签绑定的事件名称后面加上.prevent
就可以了
更多推荐
已为社区贡献2条内容
所有评论(0)