react 頁面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件的兩種操作方法
更新時(shí)間：2022年12月10日 09:56:05 作者：jjw_zyfx
這篇文章主要介紹了react 頁面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件,本文給大家分享兩種操作方法結(jié)合示例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下
react 頁面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件
當(dāng)剛進(jìn)入頁面時(shí)react并沒有自動(dòng)加載路由,因?yàn)闆]有設(shè)置只是設(shè)置了key,所以并沒有加載 用到了ant design的layout組件,代碼設(shè)置如下:
第一種操作dom的方法:
但是想讓頁面加載完成后自動(dòng)點(diǎn)擊link這個(gè)標(biāo)簽,然后加載home的組件,方法有這么幾種:
componentDidMount() {
if (window.location.hash.split('/')[1]==undefined||window.location.hash.split('/')[1]==""){
// 第一種通過DOM元素獲取標(biāo)簽并執(zhí)行點(diǎn)擊事件
var label = document.getElementById("moren").click();
}
}第二種修改window.location.href代碼如下:
componentWillMount() {
// 先判斷如果確實(shí)是第一次進(jìn)來就修改其屬性
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)容若是直接寫Function() ，就會(huì)變成執(zhí)行函數(shù)而非事件綁定，頁面加載時(shí)會(huì)自動(dòng)執(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 頁面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)react 頁面加載完成后自動(dòng)執(zhí)行點(diǎn)擊事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
從頭寫React-like框架的工程搭建實(shí)現(xiàn)
這篇文章主要介紹了從頭寫React-like框架的工程搭建實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
React實(shí)現(xiàn)路由鑒權(quán)的實(shí)例詳解
React應(yīng)用中的路由鑒權(quán)是確保用戶僅能訪問其授權(quán)頁面的方式,用于已登錄或具有訪問特定頁面所需的權(quán)限,這篇文章就來記錄下React實(shí)現(xiàn)路由鑒權(quán)的流程,需要的朋友可以參考下2024-07-07
React Native基礎(chǔ)入門之初步使用Flexbox布局
React中引入了flexbox概念，flexbox是屬于web前端領(lǐng)域CSS的一種布局方案，下面這篇文章主要給大家介紹了關(guān)于React Native基礎(chǔ)入門之初步使用Flexbox布局的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-07-07
這篇文章主要為大家介紹了react源碼合成事件深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了React 自動(dòng)聚焦字段使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了redux工作原理講解及使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-11-11
ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例
本篇文章主要介紹了ReactJS實(shí)現(xiàn)表單的單選多選和反選的示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-10-10
關(guān)于React Native使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求的方法
axios是一個(gè)基于Promise的Http網(wǎng)絡(luò)庫，可運(yùn)行在瀏覽器端和Node.js中，Vue應(yīng)用的網(wǎng)絡(luò)請(qǐng)求基本都是使用它完成的。這篇文章主要介紹了React Native使用axios進(jìn)行網(wǎng)絡(luò)請(qǐng)求,需要的朋友可以參考下2021-08-08
React中Portals與錯(cuò)誤邊界處理實(shí)現(xiàn)
本文主要介紹了React中Portals與錯(cuò)誤邊界處理實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
這篇文章主要為大家介紹了列表頁常見的hook封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07