阅读 66

react ref

ref属性可以设置为一个回调函数,这也是官方强烈推荐的用法;这个函数执行的时机为:

  • 组件被挂载后,回调函数被立即执行,回调函数的参数为该组件的具体实例。

  • 组件被卸载或者原有的ref属性本身发生变化时,回调也会被立即执行,此时回调函数参数为null,以确保内存泄露。

例如下面代码:

import React from ‘react‘

class RegisterStepTwo extends React.Component{
  state = {
    visible: true
  }
  changeVisible(){
    this.setState({visible: !this.state.visible});
  }
  refCb(instance){
    console.log(instance);
  }
  render(){
    return(
      
        {this.state.visible ? ‘卸载‘ : ‘挂载‘}ConfirmPass
        
        {
          this.state.visible ?
            : null
         }
       
     )
  }
}
export default RegisterStepTwo;
 
使用场景:
import React from ‘react‘

class NameForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {value: ‘‘};
    }
   render() {
      return (
          
          this.input =el} placeholder="演出/艺人/场馆"/>      
          获取
          
      );
    }  
    Searchtitle(){    console.log(this.input.value)  //实时的获取输入框中的值  }
  }
}
export default NameForm;

原文:https://www.cnblogs.com/1024L/p/15353894.html

文章分类
百科问答
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐