zoukankan      html  css  js  c++  java
  • React中ref的用法

    在React数据流中,父子组件唯一的通信方式是通过props属性;那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性。

    1、可以给DOM元素添加ref属性

    class TestApp extends React.Component{
        constructor(props){
            super(props);
            this.handleSubmit = this.handleSubmit.bind(this);
        }
        handleSubmit(e){
            e.preventDefault();
            console.log(`姓名:${this.nameInput.value}`);
            console.log(`学校:${ReactDOM.findDOMNode(this.refs.schoolInput).value}`);
        }
        render(){
            return(
                <form>
                    <input type="text" ref={(nameInput) => {nameInput.focus();this.nameInput = nameInput}}/><br></br>
                    <input type="text" ref="schoolInput"/><br></br>
                    <button onClick={this.handleSubmit}>提交</button>
                </form>
            )
        };
    }
    

    上面例子实现了两种方式,通过ref来获取真实DOM元素。因为第二个文本框本身为真实dom元素,也可以通过this.refs.schoolInput.value来获取值。

    ref可以设置字符串,也可以设置回调函数(推荐)。

    • 组件被挂载后,回调函数立即执行,回调函数的参数为该组件的具体事例。
    • 组件被卸载或者原有的ref属性本身发生变化时,回调也会被立即执行,此时回调函数参数为null,以确保内存泄露。
  • 相关阅读:
    php类型运算符
    今天我开始写自己的东西
    挑选简历
    SQL Server和Oracle数据库索引介绍
    排序算法分析与设计实验
    软件框架 转
    【转】Ajax的原理和应用
    Web Service
    [转]异地分布式敏捷软件开发(Distributed Agile Software Development)
    [转]如何有效的使用C#读取文件
  • 原文地址:https://www.cnblogs.com/jiangyy/p/9460075.html
Copyright © 2011-2022 走看看