React-事件详解

特点

1. react事件使用驼峰命名法
2. 事件需要用{}括起来，例如：onClick={show}

最简单的点击事件

import React from 'react'
import ReactDOM from 'react-dom'


class Parent extends React.Component {
    render () {
        return (
            <div>
                <button onClick={this.show}>点击</button>
            </div>
        )
    }
    show = () => {
        console.log('show');
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
)

事件对象

import React from 'react'
import ReactDOM from 'react-dom'


class Parent extends React.Component {
    render () {
        return (
            <div>
                <button onClick={this.show}>点击</button>
            </div>
        )
    }
    show = (e) => {
        console.log('show');
        console.log(e);
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
)

事件传参

1. 需要注意的是，如果直接在onClick={xxx}中直接传递函数的时候，需要用匿名函数，不然会报错

   <button onClick={()=>{this.show({num:111})}}>点击</button>
   

import React from 'react'
import ReactDOM from 'react-dom'


class Parent extends React.Component {
    render () {
        return (
            <div>
                <button onClick={()=>{this.show({num:111})}}>点击</button>
            </div>
        )
    }
    show = (e) => {
        console.log('show');
        console.log(e);
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
)

通过data-xxx进行传参

import React from 'react'
import ReactDOM from 'react-dom'


class Parent extends React.Component {
    render () {
        return (
            <div>
                {/* <button onClick={()=>{this.show({num:111})}}>点击</button> */}
                <button data-num="123456" onClick={this.show}>点击</button>
            </div>
        )
    }
    show = (e) => {
        console.log('show');
        console.log(e);
        console.log(e.target.dataset.num);
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
)

需要注意的是，原生的js可以通过return false阻止默认事件，但是React不行，只能通过preventDefault函数

import React from 'react'
import ReactDOM from 'react-dom'


class Parent extends React.Component {
    render () {
        return (
            <div>
                {/* <button onClick={()=>{this.show({num:111})}}>点击</button> */}
                {/* <button data-num="123456" onClick={this.show}>点击</button> */}
                <a href="http://www.baidu.com" onClick={this.show}>点击</a>
            </div>
        )
    }
    show = (e) => {
        console.log('show');
        console.log(e.preventDefault);
        e.preventDefault()
    }
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
)