Ref有點類似 JS document.getElementById這個方法，
但還是有點差異，因為Ref會一進 react生命週期觸發一次，結束後又觸發一次，
且是取得記憶位置，比較耗能，但在react中，可以用 ref來取代 document.getElementById寫法，當然還是可以用原本寫法來寫
但是為了區隔出實體Dom跟React渲染出的Dom，就可以用寫法來區分。
Ref觸發第一次時，是render完後，裡面有資料後才會把資料傳進去
與ComponentDidMount() 是一起觸發的。
Ref觸發第二次時，為結束的時候，了安全問題，會把資料清空，會與ComponentWillUnmount一起觸發。
兩種寫法:
constructor(props) {
super(props);
this.textInputRef = React.createRef();
}
<input type="text" ref={this.textInputRef} /> <input type="text" ref={(r) => (this.numberInputRef = r)} />官方推薦第一種寫法，詳細內種請點此
以下為Demo程式碼
class App extends React.Component {
constructor(props) {
super(props);
this.textInputRef = React.createRef();
}
handleSubmit = (event) => {
alert(
"Name: " +
this.textInputRef.current.value + //用 createRef的方法要用current
" id :" +
this.numberInputRef.value // 這個不用
);
event.preventDefault();
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={this.textInputRef} />
</label>
<label>
id :
<input type="text" ref={(r) => (this.numberInputRef = r)} />{/*r就是這個element的記憶體位置*/}
</label>
<input type="submit" value="Submit" />
</form>
);
}
}@copyright MRcodingRoom
觀看更多文章請點MRcoding筆記
觀看更多文章請點MRcoding筆記
