1.特点

  1. 方法名称:
    React中采用了驼峰命名法,从第二个单词的字母开始大写
    原生js的写法是全部小写
    vue中是通过v-on:加上触发事件(也是全小写的,但是没有on)
  2. 传值:
    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就可以了

Logo

前往低代码交流专区

更多推荐