react 頁面加載完成后自動執(zhí)行標簽的點擊事件的兩種操作方法

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

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

react 頁面加載完成后自動執(zhí)行標簽的點擊事件

當剛進入頁面時react并沒有自動加載路由,因為沒有設(shè)置只是設(shè)置了key,所以并沒有加載用到了ant design的layout組件,代碼設(shè)置如下:

第一種操作dom的方法:

但是想讓頁面加載完成后自動點擊link這個標簽,然后加載home的組件,方法有這么幾種:

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

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

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

下面看下react 點擊事件自動執(zhí)行的解決方法？

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

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

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

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

或是：

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

over

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

您可能感興趣的文章:

相關(guān)文章

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