快捷導(dǎo)航

react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件的兩種操作方法

更新時(shí)間：2022年12月10日 09:56:05 作者：jjw_zyfx

這篇文章主要介紹了react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件,本文給大家分享兩種操作方法結(jié)合示例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下

react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件

當(dāng)剛進(jìn)入頁(yè)面時(shí)react并沒(méi)有自動(dòng)加載路由,因?yàn)闆](méi)有設(shè)置只是設(shè)置了key,所以并沒(méi)有加載用到了ant design的layout組件,代碼設(shè)置如下:

第一種操作dom的方法:

但是想讓頁(yè)面加載完成后自動(dòng)點(diǎn)擊link這個(gè)標(biāo)簽,然后加載home的組件,方法有這么幾種:

componentDidMount() {
  if (window.location.hash.split('/')[1]==undefined||window.location.hash.split('/')[1]==""){
    // 第一種通過(guò)DOM元素獲取標(biāo)簽并執(zhí)行點(diǎn)擊事件
    var label = document.getElementById("moren").click();
    
  }
}

第二種修改window.location.href代碼如下:

componentWillMount() {
   // 先判斷如果確實(shí)是第一次進(jìn)來(lái)就修改其屬性
  if (window.location.hash.split('/')[1]==undefined||window.location.hash.split('/')[1]==""){
      window.location.href = window.location.href+"#/home"
  }
}

下面看下react 點(diǎn)擊事件自動(dòng)執(zhí)行的解決方法？

點(diǎn)擊事件內(nèi)容若是直接寫(xiě)Function() ，就會(huì)變成執(zhí)行函數(shù)而非事件綁定，頁(yè)面加載時(shí)會(huì)自動(dòng)執(zhí)行

class Title extends React.Component {
  render(){
      return <h1 onClick={func('頁(yè)面跳轉(zhuǎn)')}>{title}</h1>  
  }
}

用箭頭函數(shù)裝飾一下完成間接綁定即可避免：

class Title extends React.Component {
  render(){
      return <h1 onClick={() => func('頁(yè)面跳轉(zhuǎn)')}>{title}</h1>  
  }
}

或是：

class Title extends React.Component {
  render(){
      return <h1 onClick={func.bind(this, '頁(yè)面跳轉(zhuǎn)')}>{title}</h1>  
  }
}

over

到此這篇關(guān)于react 頁(yè)面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)react 頁(yè)面加載完成后自動(dòng)執(zhí)行點(diǎn)擊事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React useCallback使用教程
useCallback是react中比較重要的一個(gè)hook，useCallback 用來(lái)返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用
2023-01-01
基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案
這篇文章主要介紹了基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-10-10
React+echarts?(echarts-for-react)?實(shí)現(xiàn)中國(guó)地圖及省份切換功能
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫(huà)中國(guó)地圖及省份切換,有足夠的地圖數(shù)據(jù)，可以點(diǎn)擊到街道，示例我只出到市級(jí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下
2022-11-11
React使用Redux Toolkit的方法示例
Redux Toolkit可以幫助開(kāi)發(fā)者更快速、更高效地編寫(xiě)Redux應(yīng)用,本文主要介紹了React使用Redux Toolkit的方法示例,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-04-04
React中setState同步異步場(chǎng)景的使用
本文主要介紹了React中setState同步異步場(chǎng)景的使用，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果(樓梯效果)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果，樓梯效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
React 中的 useContext使用方法
這篇文章主要介紹了React中的useContext使用,使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過(guò)自己逐級(jí)查找對(duì)比改變的數(shù)據(jù)然后渲染，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-08-08
react項(xiàng)目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項(xiàng)目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
解決React報(bào)錯(cuò)Rendered more hooks than during
這篇文章主要為大家介紹了React報(bào)錯(cuò)Rendered more hooks than during the previous render解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
React中常用的一些鉤子函數(shù)總結(jié)
這篇文章給大家總結(jié)了React中常用的一些鉤子函數(shù),文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-01-01