在React中为按钮绑定点击事件
目录:
一、React中绑定事件的注意点
二、各案例详解
一、React中绑定事件的注意点
1、在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 <div>
BindEvent 组件
<hr/>
{/*在React 中，有一套自己的事件绑定机制;事件名，是小驼峰命名*/}
<button >按钮</button>//在页面上放一个按钮
//在传统的网页中可使用下方三个中其中一种方法修改上面的代码
{/*<button onClick=（function()( console.log('ok') }}>按钮</button>*/}//改为首字母大写后，就变成React中事件绑定机制了。
如果onClick后面填写为空会报错，提醒需要一个function。当点击按钮时就会走function这个函数，只要一点就会调用function。如果处理函数逻辑比较复杂那么这么写就显得比较乱。接下来可以将function单独抽出来。
//这是一个匿名函数
//注释后修改为：
<button onClick={this.myclickHandler}按钮</button>
//在自己的方法内调用方法需要用this标注
//如果加的小括号，是方法的调用，并把调用的反回值放到相应位置，不点击按钮就直接显示出结果。直接用myclickHandler是不行的，需要加this。每当触发onClick执行箭头函数的时候，就执行了函数体内的内容。
//传统按钮事件处理方法有
//onclick="" onmouseovers="" onmouseenters=""
//"" 中填一个处理函数
//用这三种方法会报出三个错误，可以猜出在React中有一套自己的事件处理机制。
</div>
}
}
//这是一个实例方法
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(<div>I
<BindEvent></BindEvent>
//只要new了一个实例在页面上，那么render函数必然会被执行。render就会解析执行return里面的东西，当解析到onClick事件那么render这个框架就会解析执行onClick里面的代码。
//用了这个组件就必然会调用上方的函数
</div>,document.getElementById('app'))
2.为事件提供的处理函数，必须是如下格式
onClick= { function }//使用时必须制定一个function
3.用的最多的事件绑定形式为:
//这是鼠标点击事件的标准用法
//实例及注意事项
{/*注意:onClick 直接受function作为处理函数*/}
{/*注意:箭头函数，本身就是一个匿名的function 函数*/}
<button onClick={ ()=>{} }>按钮</button>
//放了一个箭头函数相当于放了一个function。
btn.onclick () => {
//
}
setTimeout(function(){
// this 指向 window
}, 1000)
setTimeout(() =>{
// this 不一定指向 window
}, 1000)
二、各案例详解
新建一个测试项目:
命名为箭头函数.html
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name= "viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content=" ie=edge">
<title>Document</title>
</head>
<body>
<button id=" btn" >按钮< /button>
<script>
onload = function() {
const btn = document . getElementById( 'btn ' )
console.log(this)//在这里打印this里面是谁就打印谁
btn.onclick = function(){
//this.style.backgroundColor =’red '
//实现鼠标点击后背景变红功能
//实现功能后注释掉
setTimeout(() => {//在点击事件里加一个延时器
this. style. backgroundColor ='red'
//直接使用是不行的因为在setTimeout里this永远指向window。
因此改造成箭头函数。箭头函数就是一个普通的匿名函数，只不过this的指向比较特殊一些。
}, 1000)//加定时函数,实现点击鼠标后背景一秒钟后变红
}
}
</script>
</body>
</html>
<button onClick={ () => this. show('传参') }>按钮</button>
//事件的处理函数，需要定义为一个箭头函数，然后赋值给函数名称
show = (arg1) => {
console.1og( ' show方法' + arg1)
}
//箭头函数本身是一个匿名函数，触发onClick后调用箭头函数。先定义一个function在赋值给show调用。
这样在触发的点击事件后就可以根据show这个函数名来调用这个箭头函数。这是最标准的写法，也是最不易出错的。
在箭头函数里写方法调用，在将箭头函数赋值给一个具体的函数名。
