React的事件處理你了解嗎
更新時(shí)間：2022年03月08日 16:58:46 作者：Han_Zhou_Z
這篇文章主要為大家詳細(xì)介紹了React的事件處理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
一、React的事件處理
1、與DOM事件處理的不同之處
（1）React事件的命名方式：小駝峰方式，DOM的命名方式是小寫(xiě)
例如：DOM的命名：onclick
React的命名：onClick
（2）事件處理函數(shù)是以對(duì)象的方式賦值,而不是以字符串的方式賦值
例如：DOM以字符串方式：onclick = "handleClick()"
React以對(duì)象方式：onClick = { handleClick }
（3）阻止默認(rèn)事件的方式不同
DOM通過(guò)返回false來(lái)阻止： <a href="www.baidu.com" οnclick="javascript:return false;">百度</a>
React需要顯式調(diào)用e.preventDefault來(lái)阻止
2、React中事件處理函數(shù)的定義
（1）使用ES6的箭頭數(shù)
①在render函數(shù)中使用箭頭函數(shù)：
Ⅰ、優(yōu)點(diǎn)：不用在構(gòu)造函數(shù)中綁定this
Ⅱ、缺點(diǎn)：當(dāng)函數(shù)的邏輯比較復(fù)雜時(shí),render就顯得臃腫,無(wú)法直觀的看到組件的UI結(jié)構(gòu),代碼可讀性差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件處理函數(shù)-->在render中使用箭頭函數(shù)</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.創(chuàng)建一個(gè)類(lèi)組件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小森同學(xué)'
}
}
render(){
return (
<div>
<button onClick= { ()=>{ console.log(this.state.msg)} } >點(diǎn)我</button>
</div>
)
}
}
//2.進(jìn)行渲染
ReactDOM.render(<MyComponent/>,root)
</script>
</body>
</html>②使用class fields語(yǔ)法：將箭頭函數(shù)賦給類(lèi)的屬性
Ⅰ、優(yōu)點(diǎn)：不用在構(gòu)造函數(shù)中綁定this,在render函數(shù)中調(diào)用簡(jiǎn)單
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.創(chuàng)建一個(gè)類(lèi)組件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小沈同學(xué)',
number: 0
}
}
handleClick = ()=>{ //將箭頭函數(shù)賦給類(lèi)的屬性
console.log(this.state.msg) //將一個(gè)箭頭函數(shù)賦值為handleClick，handleClick是MyComponent的一個(gè)屬性
}
render(){
console.log('render')
return (
<div>
<button onClick= { this.handleClick } >點(diǎn)我</button> //調(diào)用這個(gè)屬性
</div>
)
}
}
//2.進(jìn)行渲染
ReactDOM.render(<MyComponent/>,root)
</script>
</body>（2）在構(gòu)造函數(shù)中進(jìn)行綁定：將事件處理函數(shù)作為類(lèi)的成員函數(shù)
注意：在定義事件處理函數(shù)時(shí),是無(wú)法識(shí)別this(即this是undefined的),必須在構(gòu)造函數(shù)中綁定this
①、優(yōu)點(diǎn)：在render函數(shù)調(diào)用時(shí)不需要重新創(chuàng)建事件處理函數(shù)
②、缺點(diǎn)：當(dāng)事件處理很多時(shí)，構(gòu)造函數(shù)就顯的很繁瑣
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.創(chuàng)建一個(gè)類(lèi)組件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小沈同學(xué)',
number: 0
}
this.add = this.add.bind(this) //this指針綁定到函數(shù)add里面去
}
handleClick = ()=>{
console.log(this.state.msg)
}
add(){ //如果上述不綁定this，那么add函數(shù)里的this將無(wú)法識(shí)別
let num = this.state.number
num++
this.setState({
number: num
})
console.log(this.state.number)
}
render(){
console.log('render')
return (
<div>
<button onClick= { this.handleClick } >點(diǎn)我</button>
<button onClick= { this.add }>Number++</button>
</div>
)
}
}
//2.進(jìn)行渲染
ReactDOM.render(<MyComponent/>,root)
</script>
</body>（3）在render函數(shù)中綁定this
①、優(yōu)點(diǎn)：在調(diào)用事件處理函數(shù)時(shí),傳參比較方便
②、缺點(diǎn)：每次調(diào)用render函數(shù)時(shí)都重新綁定,導(dǎo)致性能下降
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.創(chuàng)建一個(gè)類(lèi)組件
class MyComponent extends React.Component{
constructor(props){
super(props)
this.state={
msg: '小沈同學(xué)',
number: 0
}
// this.add = this.add.bind(this) //this指針綁定到函數(shù)add里面去
}
handleClick = ()=>{
console.log(this.state.msg)
}
add(){ //如果上述不綁定this，那么add函數(shù)里的this將無(wú)法識(shí)別
let num = this.state.number
num++
this.setState({
number: num
})
console.log(this.state.number)
}
render(){
console.log('render')
return (
<div>
<button onClick= { this.handleClick } >點(diǎn)我</button>
<button onClick= { this.add.bind(this) }>Number++</button>
</div>
)
}
}
//2.進(jìn)行渲染
ReactDOM.render(<MyComponent/>,root)
</script>
</body>（4）React中事件處理函數(shù)
幾種方式的比較
影響constructor函數(shù)中bind使用class fields語(yǔ)法render中使用箭頭函數(shù)render中使用bindrender時(shí)生成新函數(shù)否否是是性能無(wú)影響無(wú)影響有影響有影響可直接攜帶參數(shù)否否是是簡(jiǎn)潔性不好好好好
（5）注意事項(xiàng)
①React事件的命名采用小駝峰式（camelCase），而不是純小寫(xiě)。且事件名稱(chēng)之后不能加（），否則會(huì)直接執(zhí)行
②不能通過(guò)返回false的方式阻止默認(rèn)行為，必須顯示的使用preventDefault
③必須謹(jǐn)慎對(duì)待JXS回調(diào)函數(shù)中的this，在JavaScript中，class（類(lèi)）的方法默認(rèn)不會(huì)綁定this。如果忘記綁定this.textChange并把它傳入onChange，當(dāng)調(diào)用這個(gè)函數(shù)的時(shí)候，this的值為undefined。如果覺(jué)得使用bind麻煩，還可以使用箭頭函數(shù)。
3、事件處理中的參數(shù)傳遞
（1）直接傳遞參數(shù)
①在構(gòu)造函數(shù)中給事件處理函數(shù)綁定this，調(diào)用事件處理函數(shù)時(shí)直接傳參
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定義類(lèi)組件
class Clock extends React.Component{
constructor(props){
super(props)
this.state= {
list:[
{
id: 111,
msg: '小森'
},
{
id: 222,
msg: '小沈'
},
{
id: 333,
msg: '小顧'
}
],
msg: '編號(hào)：'
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(id){ //事件處理函數(shù)
alert("編號(hào)："+id)
}
render(){
//獲取狀態(tài)屬性值
const { list } = this.state
return (
<div>
{
list.map((item)=>
<button onClick={ ()=>{this.handleClick(item.id)}} key={item.id}>{item.msg}</button>
)
}
</div>
)
}
}
//2.渲染
ReactDOM.render(<Clock/>,root)
</script>注意：在箭頭函數(shù)中調(diào)用事件處理函數(shù)時(shí)不需要綁定this
②在render函數(shù)中調(diào)用事件處理函數(shù)時(shí)進(jìn)行this的綁定
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定義類(lèi)組件
class Clock extends React.Component{
constructor(props){
super(props)
this.state= {
list:[
{
id: 111,
msg: '小森'
},
{
id: 222,
msg: '小沈'
},
{
id: 333,
msg: '小顧'
}
],
msg: '編號(hào)：'
}
}
handleClick(id){ //事件處理函數(shù)，e表示觸發(fā)事件的對(duì)象,成員函數(shù)
let str = this.state.msg
alert(str + id)
}
render(){
//獲取狀態(tài)屬性值
const { list } = this.state
return (
<div>
{
list.map((item)=>
<button onClick={ this.handleClick.bind(this,item.id) } key={item.id}>{ item.msg }</button>
)
}
</div>
)
}
}
//2.渲染
ReactDOM.render(<Clock/>,root)
</script>（2）在定義UI控件時(shí)使用data自定義屬性，在事件處理函數(shù)中通過(guò)'e.target.dataset.屬性名'來(lái)獲取UI控件中的data屬性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件處理中的參數(shù)傳遞</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root');
//1.定義類(lèi)組件
class Clock extends React.Component{
constructor(props){
super(props)
this.state= {
list:[
{
id: 111,
msg: '小森'
},
{
id: 222,
msg: '小沈'
},
{
id: 333,
msg: '小顧'
}
],
msg: '編號(hào)：'
}
}
handleClick(e){ //事件處理函數(shù)，e表示觸發(fā)事件的對(duì)象
let str = this.state.msg
alert(str + e.target.dataset.count)
//事件處理對(duì)象event，通過(guò)event可以得到target目標(biāo)對(duì)象，就是那個(gè)button。dataset，得到自定義屬性的集合，在集合里找到count
}
render(){
//獲取狀態(tài)屬性值
const { list } = this.state
return (
<div>
{
list.map((item)=>
<button
onClick={ this.handleClick.bind(this) }
key={item.id}
data-count = { item.id} //標(biāo)簽的自定義屬性用'data-'開(kāi)頭后跟自定義屬性名
>{ item.msg }</button>
)
}
</div>
)
}
}
//2.渲染
ReactDOM.render(<Clock/>,root)
</script>
</body>
</html>4、事件流
（1）React的事件流默認(rèn)是冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件流</title>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root')
//1.定義CSS樣式
const style = {
child: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
parent: {
width: '150px',
height: '150px',
backgroundColor: 'blue'
},
ancestor: {
width: '200px',
height: '200px',
backgroundColor: 'green'
}
}
//2.定義類(lèi)組件
class App extends React.Component{
render(){
return (
<div
onClick= { ()=>{ console.log('ancestor')}}
style = { style.ancestor }
>
<div
onClick={ ()=>{ console.log('parent')}}
style = { style.parent }
>
<div
onClick={ (e)=>{
console.log('child')
e.stopPropagation() //阻止冒泡
}}
style = {style.child }
>
</div>
</div>
</div>
)
}
}
//3.渲染
ReactDOM.render(<App/>,root)
</script>
</body>
</html>
//輸出child，parent，ancestor（2）React中使用捕獲方式：事件類(lèi)型后面加一個(gè)后綴Capture
先由document找到最外層綠色的，然后傳給藍(lán)色，然后傳給紅色。所以工具中輸出的順序是（ancestor，parent，child）
5、事件對(duì)象
雖然React事件是合成事件,但是在事件處理中可以獲取事件對(duì)象的
（1）在React事件處理中有一個(gè)全局事件對(duì)象
event對(duì)象，每次事件觸發(fā)后(事件處理函數(shù)調(diào)用完成后)，就會(huì)清空event對(duì)象當(dāng)下一次事件觸發(fā)時(shí)重新獲取該對(duì)象。該對(duì)象不是原生(DOM)的event對(duì)象，但是可以通過(guò)該對(duì)象獲取原生對(duì)象的部分屬性
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root')
//1.定義樣式規(guī)則
const style = {
"mydiv": {
width: '150px',
height: '150px',
backgroundColor: 'red'
}
}
//2.定義類(lèi)組件
class App extends React.Component{
constructor(props){
super(props)
this.state = {
x: 0,
y: 0
}
}
render(){
return (
<div>
<div style = { style['mydiv']} //以數(shù)組的方式設(shè)置樣式
onClick= { (event)=> { //'event'對(duì)象不是原生的event,但是可以通過(guò)event來(lái)獲取原生的事件對(duì)象的部分屬性
const { clientX,clientY } = event
this.setState({
x: event.clientX,
y: event.clientY
})
>
X: {this.state.x},Y: { this.state.y }
</div>
</div>
)
}
}
//3.渲染
ReactDOM.render(<App />,root)
</script>（2）在異步操作中獲取event
問(wèn)題：當(dāng)事件觸發(fā)、響應(yīng)結(jié)束后,event對(duì)象會(huì)被清空，但是異步數(shù)據(jù)還沒(méi)有得到，在得到異步數(shù)據(jù)之后再去訪(fǎng)問(wèn) event對(duì)象的屬性就會(huì)報(bào)錯(cuò)。
解決辦法：先將event對(duì)象的某些屬性值保存起來(lái)，得到異步數(shù)據(jù)之后再來(lái)使用這些屬性值
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById('root')
//1.定義樣式規(guī)則
const style = {
"mydiv": {
width: '150px',
height: '150px',
backgroundColor: 'red'
}
}
//2.定義類(lèi)組件
class App extends React.Component{
constructor(props){
super(props)
this.state = {
x: 0,
y: 0
}
}
render(){
return (
<div>
<div style = { style['mydiv']} //以數(shù)組的方式設(shè)置樣式
onClick= { (event)=> { //'event'對(duì)象不是原生的event,但是可以通過(guò)event來(lái)獲取原生的事件對(duì)象的部分屬性
const { clientX,clientY } = event //定義變量，將event保存起來(lái)
setTimeout(()=>{ //下次觸發(fā)時(shí)就可以得到保存在變量中的值
this.setState({
x: clientX,
y: clientY
})
},1000)
}}
>
X: {this.state.x},Y: { this.state.y }
</div>
</div>
)
}
}
//3.渲染
ReactDOM.render(<App />,root)
</script>總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
React在弱網(wǎng)環(huán)境下限制按鈕多次點(diǎn)擊,防止重復(fù)提交問(wèn)題
這篇文章主要介紹了React在弱網(wǎng)環(huán)境下限制按鈕多次點(diǎn)擊,防止重復(fù)提交問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
React中遍歷數(shù)組生成標(biāo)簽問(wèn)題
這篇文章主要介紹了React中遍歷數(shù)組生成標(biāo)簽問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了react build 后打包發(fā)布總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
本文主要介紹了react導(dǎo)出excel文件的四種方式,主要包括原生js導(dǎo)出,使用?js-export-excel,使用xlsx導(dǎo)出, 使用react-html-table-to-excel,感興趣的可以了解一下2023-11-11
通過(guò)傳遞組件，我們可以將復(fù)雜組件內(nèi)部的一部分 UI 交由外部組件來(lái)控制渲染，這也是控制反轉(zhuǎn)（Inversion of Control）的一種體現(xiàn)，在 React 中，我們可以通過(guò)三種方式來(lái)傳遞組件，本文就來(lái)給大家述說(shuō)這三種方式,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了React組件之多選Checkbox實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-10-10
前兩章講到了，react 在 render 階段的 completeUnitWork 執(zhí)行完畢后，就執(zhí)行 commitRoot 進(jìn)入到了 commit 階段，本章將講解 commit 階段執(zhí)行過(guò)程源碼2022-11-11
React實(shí)現(xiàn)路由返回?cái)r截的三種方式
最近項(xiàng)目為了避免用戶(hù)誤操作導(dǎo)致數(shù)據(jù)丟失,增加返回?cái)r截功能,但是之前由于qiankun的報(bào)錯(cuò)導(dǎo)致這個(gè)功能一直有一些問(wèn)題,所以專(zhuān)門(mén)獨(dú)立搞了一個(gè)專(zhuān)題研究在react中各種方式實(shí)現(xiàn)這個(gè)功能,需要的朋友可以參考下2024-05-05
ReactHook使用useState更新變量后,如何拿到變量更新后的值
這篇文章主要介紹了ReactHook使用useState更新變量后,如何拿到變量更新后的值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03