React ref回調函數例子
ref屬性也可以是一個回調函數而不是一個名字。 這個函數將要在組件被掛載之後立即執行。
這個參照的組件將會作為該函數的參數，這個函數可以立即使用這個組件參數，當然也可以將其保存供以後使用。
當這個參照組件被卸載並且這個ref改變的時候，先前的ref的參數值將為null。這將有效的防止了內存的泄露。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="browser.min.js"></script>
</head>
<body>
<div id="#root">
</div>
</body>
<script type="text/babel">
window.onload = function(){
class Main extends React.Component{
constructor(){
super();
this.textChange = this.textChange.bind(this);
this.clearText = this.clearText.bind(this);
this.state = {"con":"你好"}
}
textChange(e){
this.setState({
"con":e.target.value
})
}
clearText(e){
this.setState({
"con":""
})
}
render(){
return(<div>
<input type="text" value={this.state.con} onChange={this.textChange} ref={function(input){ alert(input);if(input!=null){input.focus()}}} />
<input type="button" value="清空並獲得焦點" onClick={this.clearText} />
<input type="text" />
</div>)
}
}
ReactDOM.render(<Main/>,document.getElementById(‘#root‘))
}
</script>
</html>
return(<div>
<input type="text" value={this.state.con} onChange={this.textChange} ref={function(input){ alert(input);if(input!=null){input.focus()}}} />
<input type="button" value="清空並獲得焦點" onClick={this.clearText} />
<input type="text" />
</div>)
第一次打開頁面時會彈出[object HTMLInputElement];
這個函數將要在組件被掛載之後立即執行。
當點擊按鈕時則會彈出兩個對話框
一個為 null
另一個為[object HTMLInputElement]
為什麽彈出兩次呢？
第一次因為ref回調函數會在ref改變時觸發,且ref參數的值為null，所以彈出null
第二次因為調用clearText函數改變state會重新渲染改變的組件，所以再次彈出[object HTMLInputElement]
React ref回調函數例子