关于react.js:react-ref三种使用方式获取元素内容

3次阅读

共计 1980 个字符，预计需要花费 5 分钟才能阅读完成。

受控组件
在 react 中,input 标签的局部属性受到 react 管制, 如 onChange 是基于 input 和 change 事件进行封装
非受控组件
对于没有经验过封装的一些属性或者办法, 能够通过 ref 去获取这个 dom 元素, 再去获取或触发其本身的属性和办法(这点的话和 Vue 是一样的)

react 的 ref 三种应用形式，获取元素内容。
留神：应尽可能少的应用 ref，优先应用 state
1. 字符串

refGetData1=()=>{alert("获取到的内容："+this.refs.div1.innerText);
        }
 <div ref='div1' onClick={this.refGetData1}> 点我是 ref 字符串形式 </div>

2. 回调函数（举荐）

refGetData2=()=>{alert("获取到的内容："+this.refData2.innerText);
        }
<div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}> 点我是回调函数的形式 </div>

3.React.createRef()，react16.3 新增办法

constructor(props){super(props)
    this.refData3=React.createRef()  // react16.3 扩大的新办法，原理是将值赋给变量，通过 ref 挂载在节点或组件上，应用 ref 的 current 属性拿到节点}
refGetData3=()=>{alert("获取到的内容："+this.refData3.current.innerText);
}
<div ref={this.refData3} onClick={this.refGetData3}> 点我通过 React.createRef()获取我的内容，这是 react16.3 新增的办法，原理是将值赋给变量，通过 ref 挂载到节点或组件上，应用 ref 的 current 属性拿到节点 </div>

残缺代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>

<body>
    <div id='test'></div>
    <script type='text/babel'>
        class Test extends React.Component{constructor(props){super(props)
                this.refData3=React.createRef()  // react16.3 扩大的新办法，原理是将值赋给变量，通过 ref 挂载在节点或组件上，应用 ref 的 current 属性拿到节点}
        refGetData1=()=>{alert("获取到的内容："+this.refs.div1.innerText);
        }
        refGetData2=()=>{alert("获取到的内容："+this.refData2.innerText);
        }
        refGetData3=()=>{alert("获取到的内容："+this.refData3.current.innerText);
        }
        render(){
            return(
                <div>
                    <div ref='div1' onClick={this.refGetData1}> 点我是 ref 字符串形式 </div>
                    <div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}> 点我是回调函数的形式 </div>
                    <div ref={this.refData3} onClick={this.refGetData3}> 点我通过 React.createRef()获取我的内容，这是 react16.3 新增的办法，原理是将值赋给变量，通过 ref 挂载到节点或组件上，应用 ref 的 current 属性拿到节点 </div>
                </div>
            )
        }
    }
    ReactDOM.render(<Test/> ,document.getElementById('test'))
    </script>
</body>

</html>

正文完