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