日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者：jjw_zyfx ? 更新時間： 2023-01-08 編程語言

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

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

第一種操作dom的方法:

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

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

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

componentWillMount() {
   // 先判斷如果確實是第一次進(jìn)來就修改其屬性
  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

原文鏈接：https://blog.csdn.net/jjw_zyfx/article/details/90033844

欄目分類
最近更新