zoukankan      html  css  js  c++  java
  • React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式(2-1)

    import React, { Component } from "react"
    export default class MyInput extends Component {
        
    
        // 第一种
        getvalue11= () => {
            let hah = this.refs.zhi.value
            console.log("第1种", hah)
        }
      
        // 第2种 ref的使用
       getvalue=()=>{
           console.log(this.input1.value)
       }
         
        Valuerefs = React.createRef();//创建一个承装ref的容器  这个容器是专门的  只能保存一个ref  Myrefs一致  
        getvalue22=()=>{
            let pwd = this.Valuerefs.current
            console.log("第三种", pwd.value)
        }
    
        render() {
            return (
                <div>
    
    
                    {/* 第一种 */}
                    <input type="text" ref="zhi"></input>
                    <button onClick={this.getvalue11}>按钮</button>    
    
                    {/* 第二种  this.input1的实例是input*/}
                    <input type="text" ref={(input)=>{this.input1=input}}></input>
                    <button onBlur={this.getvalue}>按钮</button>
                     
    
                     {/* 第三种 */}
                    <input type="text" ref={this.Valuerefs}></input>
                    <button onClick={this.getvalue22}>按钮</button>
    
    
                </div>
            )
        }
    }
  • 相关阅读:
    Vue2020
    Vue2020
    Vue v-model双向数据绑定 的实现
    TCP 粘包
    黑幕模板
    STL总结与例子
    中缀表达式转后缀表达式
    php 转换数组里的时间戳
    gorm踩过的坑
    WxJava使用lettuce客户端的redis实现微信access_token等接口重复利用
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11619473.html
Copyright © 2011-2022 走看看