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