React组件中的事件

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就可以了