感覺與vue2.x的ref是一樣的
1.首先使用字串形式的ref
需求: 我需要兩個input框乙個是點選按鈕時彈出輸入值,乙個是失去焦點時彈出輸入值
1只是將當前元素作為引數賦值給了例項化物件的input12 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) =>
注意:內聯形式的**ref有乙個小問題,因為是在render函式裡面當檢視發生更新的時候會先設定成null再將元素當做是引數進行呼叫
//3.createref()使用ref12內聯形式
this.input1 = c } type="text" />
showdata1 = () =>
//class的繫結函式形式
bindvalue1 = (c) =>
this.bindvalue1 } type="text" />
//建立乙個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,雙或 和或 運算結果一樣,但是運算過程有點小區別。無論左邊運算結果是什麼,右邊都參與運算 當...