【React】react学习笔记05-React组件对象的三大属性-引用【ref】

作用：

获取到某个指定的dom。

用处（并不推荐过多使用）：

第一：管理焦点，文本选择，媒体播放(媒体回放)

第二：触发动画

第三：集成第三方的DOM库

用法DEMO：

点击submit按钮，会将input的值打印到控制台上，但是要注意，这种方式已经过时。

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库，ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>
   
    <script type="text/babel">
        //定义组件
        class Component extends React.Component{
            //构造函数，在初始化组件的时候会执行
              constructor(props){
                  super(props);
                  this.state={
                      name:'tom',
                      age:20
                  }
                  this.handleSubmit=this.handleSubmit.bind(this)
              }
            //出发事件获取dom以及属性的值
            handleSubmit(e) {
                //e.preventDefault();
                // 过时的使用方法，在未来版本中可能会被移除
                let inputDom = this.refs.name;
                //控制台打印prop的值
                console.log(inputDom.value);
            }

            render() {
               // 1、给input标签添加ref属性标记
                return(
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" ref="name" />
                        <button type="submit">Submit</button>
                    </form>
                );
            }
        }

        ReactDOM.render(<Component />,document.getElementById("content"));


    </script>


</body>
</html>

新的写法：

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
    <!--bable转换库，ES语法以及Jax语法的转换-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

    <div id="content"></div>
    <!--并不推荐过多使用-->
    <!--第一：管理焦点，文本选择，媒体播放(媒体回放)-->
    <!--第二：触发动画-->
    <!--第三：集成第三方的DOM库-->
    <script type="text/babel">
        //定义组件
        class Component extends React.Component{
            //构造函数，在初始化组件的时候会执行
              constructor(props){
                  super(props);
                  this.state={
                      name:'tom',
                      age:20
                  }
                  this.handleSubmit=this.handleSubmit.bind(this)
              }
            //出发事件获取dom以及属性的值
            handleSubmit() {
                console.log(this.inputName.value);
            }

            render() {
               // 1、给input标签添加ref属性标记
                return(
                    <div >
                        <input type="text"  ref={(input) => { this.inputName = input }} />
                        <button type="submit" onClick={this.handleSubmit}>Submit</button>
                    </div>
                );
            }
        }

        ReactDOM.render(<Component />,document.getElementById("content"));


    </script>


</body>
</html>

【React】react学习笔记05-React组件对象的三大属性-引用【ref】

猜你喜欢