在React的组件中绑定事件

1.给组件绑定事件

1. 创建组件，并绑定方法
   创建一个.jsx文件

import React from 'react'

export default class MyBtn extends React.Component{
    constructor(){
        super()
        this.state={

        }
    }
    render(){
        return <div>
            <button onClick={this.myClick}>点击</button>
        </div>
    }
    myClick(){
        console.log('这是myClick方法')
    }
}

这里的this指的是MyBtn这个类，而myClick是这个类的实例方法，所以要加this
onClick后面传的值必须是一个方法，而不能是一个方法引用（myClick()），也就是方法名后面不能加括号，加了括号的话，就会直接调用这个方法，而不是将这个方法传递给onClick去监听

2. 渲染组件

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

import MyBtn from '.jsx文件路径'
ReactDOM.render(
    <div>
        <MyBtn></MyBtn>
    </div>
    ,document.getElementById('app')
)

2.直接给绑定事件传递一个方法引用

1. 创建组件，并绑定方法
   创建一个.jsx文件

import React from 'react'

export default class MyBtn extends React.Component{
    constructor(){
        super()
        this.state={

        }
    }
    render(){
        return <div>
            <button onClick={()=>{this.myClick()}}>点击</button>
            <!--这里可以写成()=>this.myClick()
				因为箭头函数里面就一行代码，所以可以省略{}
			-->
        </div>
    }
    myClick(){
        console.log('这是myClick方法')
    }
}

()=>{}表示，这是一个箭头函数，所以这样可以直接使用这个方法，而不必在传一个方法给onClick

2. 渲染组件（同上）