1. 認識refs
1.1 refs說明
- refs是React提供的一種訪問DOM節(jié)點的方式
- DOM節(jié)點上使用ref屬性主要有三種不同方式獲取DOM元素
2. 獲取DOM元素的使用
2.1 通過refs獲取DOM元素
說明:
- 在DOM節(jié)點上使用ref屬性, 屬性值為自定義字符串
- 此時就可以通過組件實例對象的
refs屬性獲取所有的具有ref屬性的DOM元素, - 屬性refs的值是一個對象, 這個對象中的屬性就是DOM節(jié)點上ref屬性的值,屬性值就是DOM元素
- 因此我們可以直接通過自定義的ref屬性值獲取DOM元素
示例代碼如下:
class MyCom extends React.Component{
handleClick =() => {
console.log(this.refs);
/*
打印內(nèi)容
{
myinput: input
節(jié)點上ref屬性值: 對應DOM節(jié)點
}
*/
// 1. 獲取DOM 節(jié)點的值
let value = this.refs.myinput.value;
// 2. 打印input標簽中輸入的內(nèi)容
console.log(value);
}
render(){
return (
<div>
<input type="text" ref="myinput"/>
<button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
示例說明:
- 在需要獲取的DOM元素上添加ref屬性,自定義一個字符串的值來標記這個節(jié)點
- 當點擊button按鈕時,在事件處理函數(shù)中,通過組件實例對象
this的refs屬性,以及節(jié)點標記獲取元素 - 然后在通過
value獲取節(jié)點的值,并答應
2.2 自定組件實例屬性獲取DOM元素
說明:
- DOM元素上ref屬性的值除了是字符串還可以是一個函數(shù)
- 這個函數(shù)會接受一個參數(shù),這個參數(shù)就還是當前的DOM節(jié)點
- 在函數(shù)中給組件實例對象自定義一個屬性,并賦值這個DOM元素
- 此時就可以通過組件實例對象獲取節(jié)點并獲取值
實例代碼:
class MyCom extends React.Component{
handleClick =() => {
console.log(this);
/*
打印內(nèi)容
{
input: input
...
}
*/
// 1. 獲取DOM 節(jié)點的值
let value = this.input.value;
// 2. 打印input標簽中輸入的內(nèi)容
console.log(value);
}
render(){
return (
<div>
<input type="text" ref={(input) => this.input = input}/>
<button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
實例說明:
- 因為給input元素的ref賦值的是函數(shù)不是字符串,因為使用{}語法
- 在函數(shù)中通過形參input接受到傳遞過來的input DOM元素
- 并在函數(shù)中將這個DOM元素賦值給組件實例對象(this)的自定義屬性
input - 因此在點擊事件函數(shù)中打印的組件實例對象(this)中就有自定義屬性
input值為inputDOM元素
2.3 通過React.createRef()API獲取節(jié)點
說明:
- 在React 16.3 版本引入了
React.createRef()API, - 通過這個API,返回一個對象,這個對象,對象中有一個默認的
current屬性,值為null - 此時你需要獲取那個DOM元素,就可以將這個對象作為
ref屬性的屬性值 - 那么就可以通過這個對象的
current屬性獲取DOM元素
示例代碼如下:
class MyCom extends React.Component{
// 給組件實例對象添加一個myInput屬性
// 值為將要分配DOM節(jié)點的對象
myInput = React.createRef();
handleClick =() => {
console.log(this);
/*
打印內(nèi)容
{
myInput:{current:input}
...
}
*/
// 1. 獲取DOM 節(jié)點的值
let value = this.myInput.value;
// 2. 打印input標簽中輸入的內(nèi)容
console.log(value);
}
render(){
return (
<div>
<input type="text" ref={this.myInput}/>
<button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
示例說明:
- 在組件中創(chuàng)建一個實例對象自定義屬性
myInput, - 這個屬性值是通過
React.createRef()API創(chuàng)建的用于分配DOM元素的對象 - 在需要獲取的
input元素上添加ref屬性,屬性值,就是要分配的實例對象的自定義屬性 - 此時就可以通過組件實例對象自定義屬性
myInput的current屬性獲取到DOM元素
3. 獲取子組件實例對象
說明:
- 上面所學的三種不同的獲取DOM節(jié)點的方法,也可以用在組件上
- 在組件的子組件上也可以定義ref屬性
- 通過ref獲取子組件實例對象
- 在通過子組件的實例對象也可以調(diào)用子組件實例對象上的
示例代碼:
// 子組件
class MySon extends React.Component{
// 組件MySon實例對象方法
run = () => {
console.log("子組件上的run方法");
}
render(){
return (
<div>
這是子組件
</div>
)
}
}
// 父組件
class MyCom extends React.Component{
myInput = React.createRef();
handleClick =() => {
console.log(this);
/*
打印內(nèi)容
{
MySon: MySon
...
}
*/
// 1. 獲取子組件實例對象
let {MySon} = this;
// 2.調(diào)用子組件實例對象上的run方法
MySon.run()
}
render(){
return (
<div>
{/* 在子組件上使用ref屬性 */}
<MySon ref={(MySon) => this.MySon = MySon }/>
<button onClick={ this.handleClick }>點擊打印input內(nèi)容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
