React组件的refs属性 – 汪明鑫的个人博客

组件内的标签都可以定义ref属性来标识自己

在组件中可以通过this.refs.refName来得到对应的真实DOM对象

作用: 用于操作指定的ref属性的dom元素对象(表单标签居多)
<input ref=’username’ />
this.refs.username //返回input对象

比如要获取input标签的内容，直接let value=this.refs.username.value

上代码,先写一个静态的

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>静态页面</title>
</head>
<body>

  <div id="demo"></div>

  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">

    class App extends  React.Component{
        render(){
            return(
                <div>
                    <input type="text" />
                    <button>提示输入数据</button>
                </div>
            )
        }
    }

    ReactDOM.render(<App />,document.getElementById('demo'));


  </script>
</body>
</html>

再给button绑定事件

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>绑定事件</title>
</head>
<body>

  <div id="demo"></div>

  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">

    class App extends  React.Component{
        handleClick(){
            alert("RNG");
        }

        //注意：虚拟DOM  绑定事件的方式和真实DOM不同
        render(){
            console.log(this);
            return(
                <div>
                    <input type="text" />
                    <button onClick={this.handleClick}>提示输入数据</button>
                </div>
            )
        }
    }

    ReactDOM.render(<App />,document.getElementById('demo'));


  </script>
</body>
</html>

现在点击按钮可以出现我们写死的内容，我们想点击按钮弹出input标签里动态的内容，此时就可以用到React组件的refs属性

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>拿到input标签里的数据</title>
</head>
<body>

  <div id="demo"></div>

  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="../js/babel.min.js"></script>
  <script type="text/babel">

    class App extends  React.Component{
        //constructor只会被调用一次  render（）可能会调用多次
        constructor(props){
            super(props);

            //修改handleClick的this   constructor里的this必是组件实例对象
            //可以通过constructor里的this找到handleClick   进而修改handleClick的this   call,apply,bind的用法？

            this.handleClick = this.handleClick.bind(this);
        }
        handleClick(){
            //注意：自定义方法的this都指向null    而我们想要的this是指向组件的实例对象   ---->强制绑定this
            //console.log(this);    强制绑定this之前打印null,强制绑定this之后打印为组件的实例对象
            //获取第一个input的数据
            alert(this.refs.message.value);
        }
        //注意：虚拟DOM  绑定事件的方式和真实DOM不同   真实DOM(onclick=xxx)  虚拟DOM(onClick=xxx)
        render(){
            console.log(this);
            console.log(this.refs);
            return(
                <div>
                    <input  type="text" ref="message" />
                    <button onClick={this.handleClick}>提示输入数据</button>
                </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById('demo'));


  </script>
</body>
</html>

有2个注意点：

1，要使用refs，要在标签里指定 ref=xxx

2，React组件内部自己定义的方法，关键字this指向null,因此直接调用是没有意义的，我们需要在构造函数里强制绑定来修改this，使this指向React组件的实例

前端代码恶心的地方在于出错的不好找问题，比如一直报value undefined,看了半天ref的定义，以及refs的读取都没问题，最后才发现有个地方handleClick写成了handleClick( )，因为括号的问题找了半天，难受，马飞…

转载请注明：汪明鑫的个人博客 » React组件的refs属性