zoukankan      html  css  js  c++  java
  • react中的ref

    react中的ref和vue的ref都是可以获得组件或者DOM实例,然后可以外部调用组件组件

    react的ref两种使用方式

    1. 回调函数
    2. string形式

    1.回调函数的三种触发方式

    • 组件渲染后
    • 组件卸载后
    • ref改变后
     1 import React,{Component} from 'react'
     2 export default class UserAdd extends Component{
     3     constructor(){
     4         super();
     5     }
     6     handleSubmit=()=>{
     7         let name=this.name.value;
     8         console.log(name);
     9     }
    10     render(){
    11         return(
    12             <form onSubmit={this.handleSubmit}>
    13                 <div className="from-group">
    14                     <label htmlFor="name">姓名</label>
    15                     <input type="text" className="form-control" ref={ref=>this.name=ref}/>
    16                 </div>
    17                 <div className="from-group">
    18                     <input type="submit" className="btn btn-primary"/>
    19                 </div>
    20             </form>
    21         )
    22     }
    23 
    24 }
    View Code

    2.string形式,使用的时候用this.refs.string

     1 import React,{Component} from 'react'
     2 export default class UserAdd extends Component{
     3     constructor(){
     4         super();
     5     }
     6     handleSubmit=()=>{
     7         let name=this.refs.name.value;
     8         console.log(name);
     9     }
    10     render(){
    11         return(
    12             <form onSubmit={this.handleSubmit}>
    13                 <div className="from-group">
    14                     <label htmlFor="name">姓名</label>
    15                     <input type="text" className="form-control" ref="name"/>
    16                 </div>
    17                 <div className="from-group">
    18                     <input type="submit" className="btn btn-primary"/>
    19                 </div>
    20             </form>
    21         )
    22     }
    23 
    24 }
    View Code
    zhumiao
  • 相关阅读:
    1074 食物链 (并查集)
    2832 6个朋友
    病毒 (拓扑)
    4735 烦人的幻灯片 (拓扑)
    JavaScript中变量的LHS引述和RHS引用
    td自动换行
    SQL Server 中的 NOLOCK 到底是什么意思?
    jQuery中遇到的坑
    jQuery中attr()函数 VS prop()函数
    Javascript刷新页面的几种方法
  • 原文地址:https://www.cnblogs.com/zhumiao/p/9482527.html
Copyright © 2011-2022 走看看