1.查找dom節點

常用的方法有兩種：

? ? ? 第一種常用的方法

? ? ? ? ? ? 1.在constructor中創建ref對象；this.變量 = React.createRef()

? ? ? ? ? ? 2.在標簽中使用ref屬性綁定創建的ref對象 ref={this.變量對象}

? ? ? ? ? ? 3.在方法中直接獲取 this.變量.current

? ? ? ?第二種常用的方法

? ? ? ? ? ? 1.標簽中ref屬性值是一個箭頭函數,

? ? ? ? ? ? 2.函數體是將形參el賦值給this.變量(全局變量)

? ? ? ? ? ? 3.在方法種獲取自定義的變量

// 類組件 class MyCom extends React.Component {constructor(props) {super()this.state = {count: 0}// 第三種方法this.d3 = React.createRef() // 創建一個ref對象}// getDOM = () => {// 1 原生的查找的方式 不建議使用console.log(document.getElementById("d1"))// 2 給標簽添加ref屬性 獲取的時候通過this.refs.屬性值進行獲取，類似vue的dom的查找方式，這種方法即將刪除的 不建議使用console.log(this.refs.d2)// 3常用 在構造函數使用creteRef創建一個ref屬性值，在標簽上添加ref屬性值為這個定義的對象 建議使用console.log(this.d3.current)// 4常用 對上面方法簡寫 ref屬性值是一個回調函數，函數帶了參數el，這個el就是當前元素console.log(this.d4)// 1. 獲取函數式子組件 還是通過 ref={el=>this.d5=el}獲取的時候，獲取不到，是一個undefined的，// 因為函數式組件不能ref賦值。console.log(this.d5)// 2. 如果組件是類組件 可以獲取組件對象console.log(this.d6)this.d6.show()}render() {return (<div><button onClick={this.getDOM}> 查找DOM</button><div id="d1">div1</div><div ref="d2">div2</div><div ref={this.d3}>div3</div><div ref={el => this.d4 = el}>div4</div>{/*子組件*/}{/*<Child1 ref={el=>this.d5=el}></Child1>*/}<Child2 ref={el => this.d6 = el}></Child2></div>)} }function Child1() {return (<div>這是子組件</div>) }class Child2 extends React.Component {constructor(props) {super()}show() {alert("類組件")}render() {return (<div>子組件2</div>)} }const root = ReactDOM.createRoot(document.getElementById("app")) root.render(<MyCom />)

2.受控組件與非受控組件

1 受控組件：在react當中,默認可以完成從state到表單value的動態綁定,就是給form表單標簽和數據添加雙向綁定;

實現方式:給input標簽提供onchange事件,一旦檢測到文本框內容有變化,馬上執行onchange事件獲取表單內容,就是指的是雙向綁定;

2 非受控組件: 操作dom獲取想要的數據,ref屬性接受一個回調函數,返回一個el節點,?

實現方式:ref={el=>this.d5=el}，this.d5就是元素通過這個this.d5獲取標簽的value值;沒有更改狀態,其他使用此狀態的值不會更改

2.1 input框的狀態

1.input的value必須和onChange一起用;

2.input的defaultValue是只渲染第一次的值;

3.readOnly是設置input為只讀屬性;

class MyCom extends React.Component{constructor(props){super(props)this.state={count:0}}render(){return(<div>1 value可以結合readOnly屬性實現只讀標簽<input type="text" value={this.state.count} readOnly/><br/>2 通過使用defaultValue 綁定默認值,只在初始化綁定一次,不更新,沒有響應式特點<input type="text" defaultValue={this.state.count}/><br/>3 通過value和onchange事件實現雙向綁定,這個組件就叫受控組件;具有響應式特點;<input type="text" value={this.state.count} onChange={(e)=>{this.setState({count:e.currentTarget.value})}}/></div>)} }const root = ReactDOM.createRoot(document.getElementById("app")) root.render(<MyCom/>)

?2.2 受控組件和非受控組件

1.通過dom獲取節點然后更改節點的值的話，不會更改狀態的值;

2.更改狀態的值必須通過this.setState方法;

class MyCom extends React.Component{constructor(props){super(props)this.state={msg:"昨天鄭州新增64+294,數據比以往增加太多了"}}render(){let {msg} = this.statereturn(<div><h1>輸入框的數據:{msg}</h1>{/*非受控組件*/}<input type="text" ref={el=>this.d2=el} defaultValue={msg}/>{/*受控組件*/}<input type="text" value={msg} ref={el=>this.d1=el} onChange={(e)=>{this.setState({msg:e.target.value})}}/><button onClick={()=>{this.d1.value = "今天不知道啥情況鄭州"this.d2.value = "111"}}> ref修改</button><button onClick={()=>{console.log("獲取數據",this.state.msg)console.log("獲取數據",this.d1.value)}}>點擊獲取</button></div>)} }const root = ReactDOM.createRoot(document.getElementById("app")) root.render(<MyCom/>)

? 總結

? ? ? ? 1 受控組件 ?

? ? ? ? ? ? 受控組件依賴于狀態

? ? ? ? ? ? 受控組件的修改會實時映射在狀態值上

? ? ? ? ? ? 受控組件只有繼承于React.component才會有狀態

? ? ? ? ? ? 受控組件必須在使用onchange事件綁定對應的事件

? ? ? ? 2 非受控組件

? ? ? ? ? ?非受控組件不受狀態的控制

? ? ? ? ? ?非受控組件獲取數據 相當于操作ODM

? ? ? ? 適用場景

? ? ? ? ? ? 1 受控組件使用場景 一般需要動態設置其初始值的時候,

? ? ? ? ? ? 2 非受控組件使用場景：一般用于無任何動態初始值的情況

總結

以上是生活随笔為你收集整理的查找DOM,受控与非受控组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。