資訊專欄INFORMATION COLUMN
摘要：原理就是父組件把的回調(diào)函數(shù)當(dāng)做傳遞給子組件，然后子組件把這個(gè)函數(shù)和當(dāng)前的綁定，最終的結(jié)果是父組件的存儲(chǔ)的是子組件中的。
React ref
理解：通過(guò)指定ref獲得你想操作的元素，然后進(jìn)行修改
string 使用方法var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();ref作為回調(diào)函數(shù)的方式去使用
class Input extends Component {
constructor(props){
super(props);
}
focus = () => {
this.textInput.focus();
}
render(){
return (
{ this.textInput = input }} />
)
}
}
input參數(shù)是哪來(lái)的
回調(diào)函數(shù)將接收當(dāng)前的DOM元素作為參數(shù)，然后存儲(chǔ)一個(gè)指向這個(gè)DOM元素的引用。那么在示例代碼中，我們已經(jīng)把input元素存儲(chǔ)在了this.textInput中，在focus函數(shù)中直接使用原生DOM API實(shí)現(xiàn)focus聚焦。回調(diào)函數(shù)什么時(shí)候被調(diào)用
答案是當(dāng)組件掛載后和卸載后，以及ref屬性本身發(fā)生變化時(shí)，回調(diào)函數(shù)就會(huì)被調(diào)用。不能在無(wú)狀態(tài)組件中使用ref
原因很簡(jiǎn)單，因?yàn)閞ef引用的是組件的實(shí)例，而無(wú)狀態(tài)組件準(zhǔn)確的說(shuō)是個(gè)函數(shù)組件(Functional Component)，沒(méi)有實(shí)例。理解：class組件-對(duì)象組件-有實(shí)例 無(wú)狀態(tài)組件-函數(shù)組件-無(wú)實(shí)例
上代碼：
function MyFunctionalComponent() {
return ;
}
class Parent extends React.Component {
render() {
return (
{ this.textInput = input; }} />
);
}
}
父組件的ref回調(diào)函數(shù)可以使用子組件的DOM。
function CustomTextInput(props) {
return (
);
}
class Parent extends React.Component {
render() {
return (
this.inputElement = el}
/>
);
}
}
原理就是父組件把ref的回調(diào)函數(shù)當(dāng)做inputRefprops傳遞給子組件，然后子組件
同樣的道理，如果A組件是B組件的父組件，B組件是C組件的父組件，那么可用上面的方法，讓A組件拿到C組件的DOM。
Facebook非常不推薦會(huì)打破組件的封裝性的做法，多級(jí)調(diào)用確實(shí)不雅，需要考慮其他更好的方案去優(yōu)化
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110233.html
摘要：受控組件其值由控制的輸入表單元素稱為受控組件。如果讓表單數(shù)據(jù)由處理時(shí)，替代方案為使用非受控組件。使用非受控組件時(shí)，通常你希望可以為其指定初始值，但不再控制后續(xù)更新。 受控組件 其值由React控制的輸入表單元素稱為受控組件。 class NameForm extends React.Component { constructor(props) { super(props);...
摘要：了解記錄學(xué)習(xí)到的知識(shí)點(diǎn)，學(xué)習(xí)阮一峰大神書(shū)的一些心得回調(diào)地獄感受一下嚇人不。。。。。改良一波舒服多了有沒(méi)有是一種異步的解決方案，比傳統(tǒng)的回調(diào)更合理且強(qiáng)大。簡(jiǎn)單來(lái)說(shuō)就是一個(gè)容器，里面存在著某個(gè)未來(lái)發(fā)生的事件通常是一個(gè)異步操作的結(jié)果。 title: ES6：了解promisesubtitle: 記錄學(xué)習(xí)到的知識(shí)點(diǎn)，學(xué)習(xí)阮一峰大神es6書(shū)的一些心得 回調(diào)地獄感受一下： let...
閱讀 1386·2021-10-13 09:39
閱讀 1342·2021-09-23 11:22
閱讀 2252·2019-08-30 14:05
閱讀 1069·2019-08-29 17:03
閱讀 785·2019-08-29 16:24
閱讀 2234·2019-08-29 13:51
閱讀 663·2019-08-29 13:00
閱讀 1316·2019-08-29 11:24
