一、字符串形式的 ref

<input type="text" /*給標(biāo)簽打上標(biāo)記 ipt */ ref="ipt" />

拿到標(biāo)記的節(jié)點(diǎn)，對(duì)其進(jìn)行操作

handleClick = () => {console.log(this);// 用 ref 標(biāo)記了的標(biāo)簽，都會(huì)保存在 refs 里面console.log(this.refs); // 獲取 refsconsole.log(this.refs.ipt); // 獲取 refs 里面的標(biāo)記，返回標(biāo)記所對(duì)應(yīng)的標(biāo)簽console.log(this.refs.ipt.value); // 獲取標(biāo)記標(biāo)簽的值 }

二、回調(diào)函數(shù)形式的 ref

handleClick = () => {const {ipt} = this; // 結(jié)構(gòu)出 this 上的 iptconsole.log(ipt); }render() {return (<div><input type="text" ref = {c => this.ipt = c {/* 此時(shí)的 c 就是 input 元素本身 */}}/> {/* this.ipt 在實(shí)例上呈現(xiàn) ipt: input */}<button onClick={this.handleClick}>按鈕</button></div>) }

三、createRef 形式

// 標(biāo)記節(jié)點(diǎn) myRef = React.createRef(); myRef2 = React.createRef();handleClick = () => {// this.myRef 是一個(gè)對(duì)象// this.myRef.current === input 元素本身console.log(this.myRef.current.value); // 拿到當(dāng)前被標(biāo)記的節(jié)點(diǎn)的值 }render() {return (<div><input type="text" ref={this.myRef} /><button onClick={this.handleClick}>按鈕</button><input type="text" ref={this.myRef2} onBlur={this.handleBlur}/></div>) }

總結(jié)

以上是生活随笔為你收集整理的使用 ref 对已渲染到页面的节点进行标记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。