[React07]组件实例核心属性之一refs

[React07]组件实例核心属性之一refs

想实现如下效果：
在左侧输入后，点击中间按钮，提示左侧输入的内容；在右侧输入框输入后，鼠标点击其他位置，则提示出右边输入框的内容。

先写好基础的静态页面

//创建类式组件
    class Demo extends React.Component{
      render(){
        return(
          <div>
            <input type="text" placeholder='点击按钮提示数据'/>&nbsp;&nbsp;
            <button>点我提示数据</button>&nbsp;&nbsp;
            <input type="text" placeholder='失去焦点提示数据'/>
          </div>
        )
      }
    }
    //渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))

字符串形式的ref写法

//创建类式组件
    class Demo extends React.Component{
      //展示左侧输入框的数据
      showData = ()=>{
        
        const {input1}=this.refs
        alert(input1.value)
      }
      //展示右侧输入框的数据
      showData2 =()=>{
        const {input2}=this.refs
        alert(input2.value)
      }
      render(){
        return(
          <div>
            <input ref='input1' type="text" placeholder='点击按钮提示数据'/>&nbsp;&nbsp;
            <button onClick={this.showData}>点我提示数据</button>&nbsp;&nbsp;
            <input ref='input2' onBlur={this.showData2} type="text" placeholder='失去焦点提示数据'/>
          </div>
        )
      }
    }
    //渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))

即可实现所需的功能。但这种形式已经慢慢被淘汰不写了，存在效率问题。

回调函数形式的ref写法

//创建类式组件
    class Demo extends React.Component{
      //展示左侧输入框的数据
      showData = ()=>{
        const {input1}=this
        alert(input1.value)
      }
      //展示右侧输入框的数据
      showData2 =()=>{
        const {input2}=this
        alert(input2.value)
      }
      render(){
        return(
          <div>
            <input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder='点击按钮提示数据'/>&nbsp;&nbsp;
            <button onClick={this.showData}>点我提示数据</button>&nbsp;&nbsp;
            <input ref={(currentNode)=>{this.input2=currentNode}} onBlur={this.showData2} type="text" placeholder='失去焦点提示数据'/>
          </div>
        )
      }
    }
    //渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))

也可实现同样的效果。

createRef形式

React.createRef()是一个函数，调用后可以返回一个容器，该容器可以存储被ref所标识的节点，但是该容器只能存一个。

//创建类式组件
    class Demo extends React.Component{
      myRef=React.createRef()
      myRef2=React.createRef()
      //展示左侧输入框的数据
      showData = ()=>{
        alert(this.myRef.current.value)
      }
      //展示右侧输入框的数据
      showData2 =()=>{
        alert(this.myRef2.current.value)
      }
      render(){
        return(
          <div>
            <input ref={this.myRef} type="text" placeholder='点击按钮提示数据'/>&nbsp;&nbsp;
            <button onClick={this.showData}>点我提示数据</button>&nbsp;&nbsp;
            <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder='失去焦点提示数据'/>
          </div>
        )
      }
    }
    //渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))

学习React笔记【自用】