react學習---回撥形式的ref

阿新 • • 發佈：2022-01-03

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_字串形式的ref</title>
</head>
<body>
    <!-- 準備好一個“容器” -->
    <div id="test"></div>
    
    <!-- 引入react核心庫 -->
    <script type="text/javascript" src="../js/react.development.js" 
></script>
    <!-- 引入react-dom，用於支援react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用於將jsx轉為js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel" 
>
        //建立元件
        class Demo extends React.Component{
            //展示左側輸入框的資料
            showData = ()=>{
                const {input1} = this
                alert(input1.value)
            }
            //展示右側輸入框的資料
            showData2 = ()=>{
                const {input2} = this
                alert(input2.value)
            }
            render(){
                 
return(
                    <div>
                        <input ref={c => this.input1 = c } type="text" placeholder="點選按鈕提示資料"/>&nbsp;
                        <button onClick={this.showData}>點我提示左側的資料</button>&nbsp;
                        <input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦點提示資料"/>&nbsp;
                    </div>
                )
            }
        }
        //渲染元件到頁面
        ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
    </script>
</body>
</html>

react學習---回撥形式的ref

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>1_字串形式的ref</title>

react學習---回撥ref中回撥執行次數的問題

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>3_回撥ref中回撥執行次數的問題</title>

詳解React的回撥渲染模式

一、一個簡單的小例子 1.父元件 <Twitter username=\'tylermcginnis33\'> {(user) => user === null

吳裕雄--天生自然ANDROID開發學習：3.2 基於回撥的事件處理機制

1.什麼是方法回撥？文字表述：答:是將功能定義與功能分開的一種手段,一種解耦合的設計思想;在Java中回撥是通過介面來實現的, 作為一種系統架構,必須要有自己的執行環境,且需要為使用者提供實現介面;實現依賴於客

泡泡的學習小筆記之回撥函式

技術標籤：筆記c++ 回撥函式初接觸 Q1：什麼是回撥函式？ A：回撥函式就是一個被作為引數傳遞的函式。 Q2：如何使用回撥函式？ A：第一步：建立一個回撥函式。（普通的函式建立）第二步：在提供函式實現的一方

C++學習筆記(額外)--回撥函式的使用

技術標籤：C++ 回撥函式簡介回撥函式簡單來說就是函式A呼叫函式B,而函式B有一個引數是函式指標引數C，讓B反過呼叫這個函式指標引數C呼叫其對應的函式。簡單來說，就是一個函式呼叫另一個函式，被呼叫的函式的引

react學習——受控元件及非受控元件及ref獲取dom節點

技術標籤：reactreactjs react 建立專案的兩種方式 1.npm 全域性安裝 npm install -g create-react-app

《SystemVerilog驗證測試平臺編寫指南》學習筆記——回撥

技術標籤：SystemVerilogsystemverilog 一、回撥如何建立一個可以不做任何更改就能在所有測試中使用的驗證環境？要做到這一點的關鍵就是測試平臺必須提供一個“鉤子”，以便測試程式在不修改原始類的情況下注入

JUC學習-7-ForkJoin-非同步回撥-Future

ForkJoin 分支合併 ForkJoin在JDK1.7出現的並行執行任務提高效率大資料量把大任務分成小任務

淺析Vue3相關基礎知識點：setup()入口函式、ref()定義響應式資料、reactive()定義多個響應式資料-深層的、toRefs()轉換為每個屬性都是一個ref、computed()計算屬性、watch()監聽資料、watchEffect()監聽資料變化執行回撥、生命週期對比、provide/inject跨層級元件通訊

一、setup 　　setup是組合Composition API中的入口函式，也是第一個要使用的函式。

淺析CSS中過渡transition學習：animation與transition的區別、過渡的4個屬性及簡寫模式、過渡觸發方式、過渡漸變（需絕對值）、如何使用硬體加速、過渡時間函式、過渡結束回撥事件

一、過渡（transition） CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。這個定義有種熟悉的感覺，它彷彿和animation非常相似，那麼他們實際上有何區別呢？

react學習---state的簡寫形式

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>state簡寫方式</title>

學習Android之網路請求會回撥

網路請求回撥的實現方式　　雖然掌握了HttpURLConnection和OkHttp的用法，但是傳送HTTP請求的程式碼基本是相同的，所以我們需要將這些通用的網路操作提取到一個公共的類裡，並提供一個通用方法：

iOS-Swift初級知識-回撥函式中in的意思

Alamofire.request(\"https://api.openweathermap.org/xxx\").responseJSON { response in //xxx } 複製程式碼

Java如何實現一個回撥地獄（Callback Hell）？

對於回撥地獄（Callback hell），想必大家都不陌生，尤其對於前端的朋友，當然前端的朋友通過各種辦法去避免回撥地獄，比如Promise。但是對於後端的朋友，尤其在RxJava、Reactor等反應式程式設計框架興起之後，對於回

SpringBoot啟動應用及回撥監聽原理解析

這篇文章主要介紹了SpringBoot啟動應用及回撥監聽原理解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

通過簡易例子講解Java回撥機制

這篇文章主要介紹了通過簡易例子講解Java回撥機制,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

React學習之JSX與react事件例項分析

本文例項講述了React學習之JSX與react事件。分享給大家供大家參考，具體如下：

React學習之受控元件與資料共享例項分析

本文例項講述了React學習之受控元件與資料共享。分享給大家供大家參考，具體如下：

JavaScript回撥函式callback用法解析

這篇文章主要介紹了JavaScript回撥函式callback用法解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

react學習---回撥形式的ref

相關推薦