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>
)
}
.
