react绑定事件

语法:

<元素 事件名1={事件处理函数1} 事件名2={事件处理函数2}></元素>

注意：React 事件名采用驼峰命名法，比如 onClick、onMouseEnter 等。

类组件中的事件绑定

点击按钮控制台打印  Hello World

class App extends React.Component {
    render() {
        return (
            <button
                onClick={() => {
                    console.log('Hello World')
                }}
            >
                click
            </button>
        )
    }
}

也可以把事件处理函数进行提取。

class App extends React.Component {
    handleClick() {
        console.log('Hello World')
    }
    render() {
        return <button onClick={this.handleClick}>click</button>
    }
}

 函数组件中的事件绑定

const App = () => {
    const handleClick = () => {
        console.log('Hello World')
    }
    return <button onClick={handleClick}>click</button>
}

获得事件对象

通过形参 e 可以拿到事件对象，例如 e.target 就是触发事件的那个 DOM 元素。