1愈魏、通過原生JS獲取Dom去操作
通過document.querySelector('#title')原生js的方式去拿到dom節(jié)點(diǎn)呜呐，然后去進(jìn)行操作疮方。
import {Component} from "react";
class App extends Component {
//定義獲取Dom的函數(shù)
handleGetDom(){
let title = document.querySelector('#title');
console.log(title);
title.style.background = 'skyblue'
}
render() {
return (
<>
<h1 id="title">測試節(jié)點(diǎn)</h1>
<button onClick={this.handleGetDom}>點(diǎn)擊操作Dom</button>
</>
)
}
}
export default App;
2喷斋、通過react官方提供的ref以及refs去獲取DOM元素
但是需要值得一提的是唁毒，官方的refs將在未來的時間段內(nèi)會被廢除，并且因ref掛載的節(jié)點(diǎn)是掛載在組件實(shí)例上星爪，因此函數(shù)不能使用es5的寫法浆西，如果使用es5的寫法，需要.bind去更改this指向顽腾，否則this.refs拿到的將是undefined近零。
handleGetDom = () => {
console.log(this);
let { header } = this.refs;
header.style.background = 'gold';
}
render() {
return (
<>
<h1 ref={'header'}>測試節(jié)點(diǎn)</h1>
<button onClick={this.handleGetDom}>點(diǎn)擊操作Dom</button>
</>
)
}
3、通過react官方提供的ReactDOM.findDOMNode去操作DOM元素
使用這種方式需要注意的是ReactDOM需要使用import ReactDOM from 'react-dom'提前引入進(jìn)來抄肖，否則是找不到findDOMNode這個方法的久信。
import {Component} from "react";
import ReactDOM from 'react-dom'
class App extends Component {
handleGetDom = () => {
let title = document.querySelector('#title');
ReactDOM.findDOMNode(title).style.background = 'green'
}
render() {
return (
<>
<h1 id="title">測試節(jié)點(diǎn)</h1>
<button onClick={this.handleGetDom}>點(diǎn)擊操作Dom</button>
</>
)
}
}
export default App;
4、通過react官方推薦的ref回調(diào)函數(shù)去獲取DOM元素
前面涉及到refs即將被刪除漓摩，因此裙士，新版本 React 不推薦 使用ref string去操作DOM，轉(zhuǎn)而推薦我們使用 ref callback的使用方式管毙，通過這種方式掛載到實(shí)例對象上面腿椎，只需要在回調(diào)函數(shù)中使用this.屬性名即可
import {Component} from "react";
class App extends Component {
handleGetDom = () => {
this._title.style.background = 'red'
}
render() {
return (
<>
<h1 ref={(ele)=>{this._title = ele}}>測試節(jié)點(diǎn)</h1>
<button onClick={this.handleGetDom}>點(diǎn)擊操作Dom</button>
</>
)
}
}
export default App;
5、react官方推薦的寫法：React.createRef()
Refs 是使用 React.createRef() 創(chuàng)建的夭咬，并通過 ref 屬性附加到 React 元素啃炸。在構(gòu)造組件時，通常將 Refs 分配給實(shí)例屬性卓舵，以便可以在整個組件中引用它們南用。當(dāng) ref 被傳遞給 render 中的元素時，對該節(jié)點(diǎn)的引用可以在 ref 的 current 屬性中被訪問。
ref 的值根據(jù)節(jié)點(diǎn)的類型而有所不同：
- 當(dāng) ref 屬性用于 HTML 元素時训枢，構(gòu)造函數(shù)中使用 React.createRef() 創(chuàng)建的 ref 接收底層 DOM 元素作為其 current 屬性。
- 當(dāng) ref 屬性用于自定義 class 組件時忘巧，ref 對象接收組件的掛載實(shí)例作為其 current 屬性恒界。
- 不能在函數(shù)組件上使用 ref 屬性，因為他們沒有實(shí)例砚嘴。
示例：
通過實(shí)現(xiàn)監(jiān)聽輸入框的值以及將輸入框的值追加到獲取到的dom元素ul中去十酣，在通過獲取ul的子節(jié)點(diǎn)li，去給所有的li添加點(diǎn)擊事件
import React, {Component} from "react";
class App extends Component {
state = {
msg:''
}
// 使用官方推薦的獲取節(jié)點(diǎn)的寫法進(jìn)行操作
title = React.createRef();
// 監(jiān)聽輸入框的值
handleChange = (e) => {
this.setState({
msg:e.target.value
})
}
// 將監(jiān)聽到輸入框的值追加到獲取到的ul的DOM元素中去
handleAdd = () => {
let {current} = this.title; //解構(gòu)refs綁定的dom
current.innerHTML += `<li>${this.state.msg}</li>`;
// 追加完成后清空輸入框
this.setState({
msg:''
})
// 打印下是否獲取到了ul下的所有子節(jié)點(diǎn)
console.log(current.childNodes);
// 通過操作DOM給每個子節(jié)點(diǎn)li再次添加點(diǎn)擊事件
this.title.current.childNodes.forEach((item,index)=>{
item.onclick = ()=>{
item.innerHTML +=`<b>點(diǎn)擊了li元素<b>`;
}
})
}
render() {
return (
<>
<input type="text" value={this.state.msg} onChange={this.handleChange}></input>
<button onClick={this.handleAdd}>添加數(shù)據(jù)</button>
<ul ref={this.title}></ul>
</>
)
}
}
export default App;
