## :-: reference reference: 引用 ```jsx {/* ref字符串形式 */} <input type="text" ref="test" value={this.state.val} onChange={()=>{this.setState({val:this.refs.test.value})}} /> ``` **使用場景：希望直接操作dom元素，或者希望直接使用自定義組件中的某個方法。** * ref作用內置的html組件，得到的將是真實的dom元素。 * ref作用于類組件，得到的是類的實例。 * ref不能作用于函數組件。 * ref不再推薦使用字符串賦值，字符串賦值的方式將來可能會被取消。 **目前ref推薦使用對象或者是函數的形式。** -- *對象形式* 通過 React.createRef 函數創建 ```jsx {/* ref對象形式 */} constructor(props){ super(props); this.txt = React.createRef(); // 對象形式 // this.txt = {current:null}; // 效果一致 } <input type="text" value={this.state.val} ref={this.txt} onChange={()=>{this.setState({val:this.txt.current.value})}} /> ``` -- *函數形式* ```jsx {/* ref函數形式 */} <input type="text" ref={el=>{this.txt=el}} value={this.state.val} onChange={()=>{this.setState({val:this.txt.value})}} /> ``` **謹慎使用ref，盡量少的使用它** ## :-: Ref轉發 React.forwardRef 方法 1.參數：傳遞的是函數組件 2.返回值：返回一個新的組件 ```jsx // 傳遞函數組件Func，得到一個新的組件NewFunc (跟高階組件差不多) const NewFunc = React.forwardRef(Func); console.log(this.xxx) <NewFunc ref={this.xxx} /> ```