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

the_fool_

已于 2022-01-27 16:39:17 修改

阅读量197

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2019-09-29 09:32:56 首次发布

本文链接：https://blog.csdn.net/the_fool_/article/details/101672330

版权

React 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

作用：

获取到某个指定的dom。

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

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

第二：触发动画

第三：集成第三方的DOM库

用法DEMO：

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

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

</head>
<body>
    <!--react基础库-->
      <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.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();form组件onSubmit()常用
                // 过时的使用方法，在未来版本中可能会被移除
                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>

获取input值的两种方式：

方式一：

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

</head>
<body>
    <!--react基础库-->
      <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.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>

方式二：

export default class Search extends Component{
    constructor(props){
        super(props);
        this.state={
            currentKeyValue: ''
        }
    }
    setCurrentKeyValue= (e) => {
        const currentKeyValue = e.target.value
        this.setState({
            currentKeyValue
        })

    }
    //点击查询按钮，将值传给父组件
    search = () =>{
        this.props.setKeyWorld(this.state.currentKeyValue);
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.currentKeyValue} onChange={this.setCurrentKeyValue}/>
                <button onClick={this.search}>查询</button>
            </div>
        );
    }

}

the_fool_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【React】react学习笔记05-React组件对象的三大属性-引用【ref】

作用：获取到某个指定的dom。用处（并不推荐过多使用）：第一：管理焦点，文本选择，媒体播放(媒体回放)第二：触发动画第三：集成第三方的DOM库用法DEMO：点击submit按钮，会将input的值打印到控制台上，但是要注意，这种方式已经过时。<!DOCTYPE html><html><head> &...
复制链接

扫一扫

专栏目录