react學習 day03 refs的使用

2022-07-07 18:06:31 字數 1380 閱讀 3623

感覺與vue2.x的ref是一樣的

1.首先使用字串形式的ref

需求: 我需要兩個input框乙個是點選按鈕時彈出輸入值,乙個是失去焦點時彈出輸入值

1

2 showdata1 = () =>

6 showdata2 = () =>

10render() >點選我

15this.showdata2} ref="input2" type="text" />

1617)18

}19}react中建議不要使用字元型別的ref並提示在未來會刪除字元型別的ref

2.**形式的ref

12 showdata1 = () =>

5 showdata2 = () =>

8render() type="text" />

12this.showdata1 }>點選我

13this.showdata2 } ref= type="text" />

1415)16

}17}在使用**形式的ref時一定要注意其this的指向到底是誰

**中 c 代表的是currentnode,當前節點,如果將箭頭函式展開就是:

(c) =>

只是將當前元素作為引數賦值給了例項化物件的input1

注意:內聯形式的**ref有乙個小問題,因為是在render函式裡面當檢視發生更新的時候會先設定成null再將元素當做是引數進行呼叫

//

內聯形式

this.input1 = c } type="text" />

showdata1 = () =>

//class的繫結函式形式

bindvalue1 = (c) =>

this.bindvalue1 } type="text" />

3.createref()使用ref12

//建立乙個createref容器

3 value1 =react.createref()

4 value2 =react.createref()

5 showdata1 = () =>

8 showdata2 = () =>

11render() type="text" />

15this.showdata1}>點選我

16this.showdata2} ref= type="text" />

1718)19

}20}需要注意的是

react.createref()呼叫後會返回乙個容器且這個容器只能儲存乙個元素(後面的會覆蓋前面的)

在取ref值時current這個物件值是固定的

createref()方法是react官方推崇的

前端學習day03

今天學了個新東西,是根據螢幕寬度大小修改網頁顯示的內容。大概查了下用法,media 可以針對不同的螢幕尺寸設定不同的樣式,特別是如果你需要設定設計響應式的頁面,media 是非常有用的。當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面。這個有時有效,有時會失效,具體是看電腦解析...

機器學習Day 03

給定乙個由d個 屬性描述 的示例x x1 x2,xd 其中xi 是x在第 i個屬性 上的取值 線性模型 linear model 試圖學得乙個通過屬性的現實組合來進行 的函式,即 f x w 1x1 w2x2 wdx d b 一般用向量形式寫成 f x w tx b 其中w w1,w2,w d w ...

學習筆記day03

邏輯運算子 異或 符號兩邊結果相同,結果為false 符號兩邊結果不同,結果為true 面試題1,雙與 也叫短路運算,因為左側如果為假的話直接不判斷右側結果 與 c無論左邊結果運算是什麼,右邊都參與運算。2,雙或 和或 運算結果一樣,但是運算過程有點小區別。無論左邊運算結果是什麼,右邊都參與運算 當...