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

學無先后，達者為師

網站首頁 編程語言 正文

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

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

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

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

第一種操作dom的方法:

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

componentDidMount() {
  if (window.location.hash.split('/')[1]==undefined||window.location.hash.split('/')[1]==""){
    // 第一種通過DOM元素獲取標簽并執行點擊事件
    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 點擊事件自動執行的解決方法？

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

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

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

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

或是：

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

over

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

欄目分類
最近更新