开发者学堂课程【React 入门与实战：在 React 中为按钮绑定点击事件1】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/585/detail/8116
在 React 中为按钮绑定点击事件1
目录:
一、React 中绑定事件的注意点
一、React 中绑定事件的注意点
在 React 中事件都由 React 提供，事件名字必须按 React 规范来写。比如点击事件onClick 事件C字母需要大写，像鼠标的覆盖事件 onMouseOver 的 M 和 O 需要大写。
//点击事件由 onClick 提供 鼠标事件由 onMouseOver 提供，下面实例举例：
在 components 中新建 BindEvent.jsx
import React from' react'
export default class BindEvent extends React . Component {
constructor(){
super( )
//私有数据this.state = {}
}
render(){//需要一个合法js标签return
BindEvent 组件
{/*在React 中，有一套自己的事件绑定机制;事件名，是小驼峰命名*/}
按钮
//在页面上放一个按钮
//在传统的网页中可使用下方三个中其中一种方法修改上面的代码
{/*（function()( console.log('ok') }}>按钮*/}
//改为首字母大写后，就变成React中事件绑定机制了。
如果 onClick 后面填写为空会报错，提醒需要一个 function 。当点击按钮时就会走function 这个函数，只要一点就会调用 function 。如果处理函数逻辑比较复杂那么这么写就显得比较乱。接下来可以将 function 单独抽出来。
//这是一个匿名函数
//注释后修改为：
按钮
//在自己的方法内调用方法需要用 this 标注
//如果加的小括号，是方法的调用，并把调用的反回值放到相应位置，不点击按钮就直接显示出结果。直接用 myclickHandler 是不行的，需要加 this。每当触发onClick 执行箭头函数的时候，就执行了函数体内的内容。
//传统按钮事件处理方法有
//onclick="" onmouseovers="" onmouseenters=""
//"" 中填一个处理函数
//用这三种方法会报出三个错误，可以猜出在 React 中有一套自己的事件处理机制。
}
}
//这是一个实例方法 myclickHandler()=>{
// myclickHandler() 属于类的内部，render()和myclickHandler()都属于实例方法。将函数的引用交给function。 console. log( '22222222' )}//这是匿名函数的引用，和匿名函数效果是完全一样的。
在 index.js 中编写：
//1. 导入包
// import React, {Component} from 'react'//
import React from'react'
import ReactDOM from' react - dom'
import BindEvent from'@/ components/ BindEvent'
3.调用 render 函数渲染
ReactDOM. render(
I
//只要 new 了一个实例在页面上，那么 rende 函数必然会被执行。render 就会解析执行 return 里面的东西，当解析到 onClick 事件那么 render 这个框架就会解析执行 onClick 里面的代码。
//用了这个组件就必然会调用上方的函数
,document.getElementById('app'))
2.为事件提供的处理函数，必须是如下格式 onClick= { function }
//使用时必须制定一个 function
3.用的最多的事件绑定形式为:
//这是鼠标点击事件的标准用法
//实例及注意事项
{/*注意: onClick 直接受 function 作为处理函数*/}
{/*注意:箭头函数，本身就是一个匿名的 function 函数*/}{} }>按钮
//放了一个箭头函数相当于放了一个 function。
btn.onclick () => {
//
}
setTimeout(function(){
// this 指向 window
}, 1000)
setTimeout(() =>{
// this 不一定指向 window
}, 1000)
