一. 字符串形式调用(简单,但是效率低,在未来的版本中可能会废弃,不推荐使用)
//创建类式组件 class Demo extends React.Component{ render(){ return ( <div> <input type='text' placeholder="点击按钮提示" id="aa"/> <button onClick={this.showData}>显示提示效果</button> <input ref='aa1' type='text' onBlur={this.showData1} placeholder="失去按钮提示" id="aa1"/> </div> /* 组件内的标签可以定义ref来标识自己,会在组件的实例对象的this.refs属性中找到 */ ) } showData = ()=>{ let v = document.querySelector("#aa").value; alert(v); } showData1 = ()=>{ let v = document.querySelector("#aa1").value; console.log(this); let v1 = this.refs.aa1.value; console.log(v,"--",v1); /*不建议使用它,因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。 一句话总结: 效率不高 */ } } //渲染组件到页面 ReactDOM.render(<Demo/>, document.querySelector("#test"));
二. 回调函数调用(简单好用,使用频率高)
//创建类式组件 class Demo extends React.Component{ render(){ return ( <div> <input ref={(currentNode)=>{this.input1=currentNode}} type='text' placeholder="点击按钮提示" id="aa"/> <button onClick={this.showData}>显示提示效果</button> <input ref={c=>this.input2=c} type='text' onBlur={this.showData1} placeholder="失去按钮提示" id="aa1"/> </div> /* 以上两种ref的赋值方式属于: 回调函数 */ ) } showData = ()=>{ console.log(this.input1.value); } showData1 = ()=>{ console.log(this.input2.value); } }
二. React.createRef() 调用(官方推荐)
//创建类式组件 //创建类式组件 class Demo extends React.Component{ myRef = React.createRef() myRef2 = React.createRef() //React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是"专人专用" //推荐 ref方法 render(){ return ( <div> <input ref={this.myRef} type='text' placeholder="点击按钮提示" id="aa"/> <button onClick={this.showData}>显示提示效果</button> <input ref={this.myRef2} type='text' onBlur={this.showData1} placeholder="失去按钮提示" id="aa1"/> </div> ) } showData = ()=>{ let input1 = this.myRef.current; console.log(input1.value); } showData1 = ()=>{ console.log( this.myRef2.current.value); } }