react 頁面加載完成后自動執(zhí)行標(biāo)簽的點(diǎn)擊事件的兩種操作方法
更新時(shí)間：2022年12月10日 09:56:05 作者：jjw_zyfx
這篇文章主要介紹了react 頁面加載完成后自動執(zhí)行標(biāo)簽的點(diǎn)擊事件,本文給大家分享兩種操作方法結(jié)合示例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下
react 頁面加載完成后自動執(zhí)行標(biāo)簽的點(diǎn)擊事件
當(dāng)剛進(jìn)入頁面時(shí)react并沒有自動加載路由,因?yàn)闆]有設(shè)置只是設(shè)置了key,所以并沒有加載 用到了ant design的layout組件,代碼設(shè)置如下:
第一種操作dom的方法:
但是想讓頁面加載完成后自動點(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)擊事件自動執(zhí)行的解決方法？
點(diǎn)擊事件內(nèi)容若是直接寫Function() ，就會變成執(zhí)行函數(shù)而非事件綁定，頁面加載時(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í)行標(biāo)簽的點(diǎn)擊事件的文章就介紹到這了,更多相關(guān)react 頁面加載完成后自動執(zhí)行點(diǎn)擊事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
useCallback是react中比較重要的一個(gè)hook，useCallback 用來返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2023-01-01
基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案
這篇文章主要介紹了基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
React+echarts?(echarts-for-react)?實(shí)現(xiàn)中國地圖及省份切換功能
這篇文章主要介紹了React+echarts?(echarts-for-react)?畫中國地圖及省份切換,有足夠的地圖數(shù)據(jù)，可以點(diǎn)擊到街道，示例我只出到市級，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下2022-11-11
Redux Toolkit可以幫助開發(fā)者更快速、更高效地編寫Redux應(yīng)用,本文主要介紹了React使用Redux Toolkit的方法示例,具有一定的參考價(jià)值,感興趣的可以了解一下2025-04-04
本文主要介紹了React中setState同步異步場景的使用，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
React實(shí)現(xiàn)二級聯(lián)動效果(樓梯效果)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級聯(lián)動效果，樓梯效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了React中的useContext使用,使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
react項(xiàng)目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項(xiàng)目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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
這篇文章給大家總結(jié)了React中常用的一些鉤子函數(shù),文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01