Refs 是 React 提供給我們的安全訪問 DOM 元素或者某個組件實例的句柄。
我們可以為元素添加 ref 屬性然后在回調函數中接受該元素在 DOM 樹中的句柄,該值會作為回調函數的第一個參數返回:
class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value) } render () { return ( <form onSubmit={this.handleSubmit}> <input type='text' ref={(input) => this.input = input} /> <button type='submit'>Submit</button> </form> ) } }
上述代碼中的 input 域包含了一個 ref 屬性,該屬性聲明的回調函數會接收 input 對應的 DOM 元素,我們將其綁定到 this 指針以便在其他的類函數中使用。
另外值得一提的是,refs 並不是類組件的專屬,函數式組件同樣能夠利用閉包暫存其值:
function CustomForm ({handleSubmit}) { let inputElement return ( <form onSubmit={() => handleSubmit(inputElement.value)}> <input type='text' ref={(input) => inputElement = input} /> <button type='submit'>Submit</button> </form> ) }
.