react之ref屬性和事件處理屬性

阿新 • • 發佈：2020-12-22

技術標籤：需理解 # react html react javascript js

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_component_refs_event</title>
    <script src="../js/react.development.js"></script>
    <script src 
="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="example1"> 
</div>
<div id="example2"></div>

<script type="text/babel">

    //1.定義元件
    class MyComponent extends React.Component{
        constructor(props) {
            super(props)
            this.showInput = this.showInput.bind(this)
            this.newShowInput = 
 this.newShowInput.bind(this)
            this.handleBlur = this.handleBlur.bind(this)
        }

        showInput() {
            const input = this.refs.content;
            alert(input.value)
        }

        newShowInput() {
            alert(this.something.value)
        }

        handleBlur(event) {
            alert(event.target.value)
        }

        render(){
            return(
                <div>
                    <input type="text" ref="content"/>&nbsp;&nbsp;
                    <button onClick={this.showInput}>舊版本提示輸入</button>&nbsp;&nbsp;
                    <input type="text" ref={input => this.something = input}/>&nbsp;&nbsp;
                    <button onClick={this.newShowInput}>新版本</button>&nbsp;&nbsp;
                    <input type="text" placeholder="失去焦點提示內容" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }

    //2.渲染元件標籤
    ReactDOM.render(<MyComponent />,document.getElementById("example"))
</script>
</body>
</html>

程式碼講解

this.refs.content指的是該類ref=content的元素，ref屬性是該元素的標識，相當於HTML中的id屬性。
新版本的ref屬性是這樣賦值的，其中，input指這個標籤名字（我試過將此處的input改為aaa也能夠實現功能，但是視訊說的是什麼標籤就用什麼名字，），something為自命名

<input type="text" ref={input => this.something = input}/>&nbsp;&nbsp;

placeholder屬性為背景提示內容
event.target.value的值是呼叫這個方法的元素的input輸入值

react之ref屬性和事件處理屬性

技術標籤：需理解# reacthtmlreactjavascriptjs 程式碼 <!DOCTYPE html> <html lang="en">

C#建立自定義控制元件及新增自定義屬性和事件使用例項詳解

前言 C#本身提供了很強大的控制元件庫，但是很多控制元件庫的功能只是一些基本的功能，就比如最簡單的按鈕，C#提供了最基礎的按鈕使用方法，但是如果要增加一些功能，比如按鈕按下要一個圖片，彈起要另一個圖片這樣的

Video元素屬性和事件用法

一、Video 屬性

元素的拖拽屬性和事件

因為公司的一個專案需求，實現拖拽來交換位置，雖然知道有一些外掛，但還是想有沒有其它的快速實現方法，因為之前好像有了解過標籤的拖拽屬性，還稍微有點印象。就想試試。就在這裡簡單的做個總結。

Vue學習筆記（二）動態繫結、計算屬性和事件監聽

目錄一、為屬性繫結變數1. v-bind的基本使用2. v-bind動態繫結class(物件語法)3. v-bind動態繫結class(陣列語法)4. v-bind動態繫結style(物件語法)5. v-bind動態繫結style(陣列語法)二、計算屬性1. 基本使用2. 計算

HTML標籤、屬性和事件

學習H5，就需要知道什麼是HTML的標籤、屬性和事件。標籤是機器的一種語言，只有相應的瀏覽器能讀懂，所以在html裡制定了網頁展現所需要的基本標籤，用於顯示錶格、圖片、文字等。

Python屬性和內建屬性例項解析

這篇文章主要介紹了Python屬性和內建屬性例項解析,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

JS的資料屬性和訪問器屬性

ECMA-262第5版在定義只有內部才用的特性（attribute）時，描述了屬性（property）的各種特徵。ECMA-262定義這些特性是為了實現javascript引擎用的，因此在javascript中不能直接訪問它們。為了表示特性時內部值，該

命令執行監測&檔案屬性和可執行屬性

1.監測命令的執行時間 time command [llchen@login dhg]$ time sleep 5 real0m5.012s #程式開始至結束的時間，包括其他程序佔用的時間片和IO時間

vue 計算屬性和監聽屬性

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Title</title>

vue中的計算屬性和偵聽屬性

計算屬性計算屬性用於處理複雜的業務邏輯計算屬性具有依賴性，計算屬性依賴 data中的初始值，只有當初始值改變的時候，計算屬性才會再次計算

JS高階--Object資料屬性和訪問器屬性

嗨！我是前端小M~~ Obj資料屬性和訪問器屬性（可以對物件中常規的有範圍的資料進行判斷，比如年齡（age）分數(score)）

js可列舉屬性和不可列舉屬性

我最近在學習vue的雙向繫結原理，用到一個了Object.defineProperty()方法。如果不太理解這個方法可以點選這裡。其中有個enumerable 配置項，如下

類屬性和例項化屬性

類的構成包括成員屬性和成員方法（資料成員和成員函式）類的方法，有這麼幾個種：類方法、靜態方法和例項方法。

enment外掛和display屬性和一些CSS屬性

一、 Emment是直接在編輯器上輸入HTML和CSS程式碼的縮寫，然後按下tab鍵 1. div*3 新建三個div標籤

詳解jQuery的核心函式和事件處理

目錄事件頁面載入事件委派事件切換事件總結事件頁面載入 1.ready(fn)當DOM載入就緒可以查詢及操縱時繫結一個要執行的函式

48.dom操作固有屬性和自定義屬性

<head><meta charset=\"UTF-8\"><title>6.dom操作固有屬性和自定義屬性</title></head><body><div id=\"no1\" role=\"我是role屬性\" title=\"冒個泡\">測試效果</div

11jquery操作標籤的其它屬性和自定義屬性

<head><meta charset=\"UTF-8\"><title>5.操作標籤的其它屬性和自定義屬性.html</title></head><body><div role=\"role\" title=\"標題\" index=\"\">測試標籤屬性</d

C#之ref引數和out引數的區別

1：什麼是 ref 引數？， 2：什麼是 out 引數？1、使用 ref 引數時，傳入的引數必須先被初始化。對 out 引數而言，必須在方法中對其完成初始化。2、使用 ref 和 out 時，在方法的引數和執行方法時，都要加 ref 或

vue入門教程之-屬性、事件和雙向繫結

vue入門教程之-屬性、事件和雙向繫結歡迎關注博主公眾號「java大師」, 專注於分享Java領域乾貨文章, 關注回覆「資源」, 免費領取全網最熱的Java架構師學習PDF, 轉載請註明出處 https://www.javaman.cn/vue/vue-mode

react之ref屬性和事件處理屬性

程式碼

程式碼講解

相關推薦