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>
            )
        }
    }
  • 相关阅读:
    Codeforces Round #419 (Div. 2)
    论蒟蒻的自我修养
    12 day 1
    Balanced Teams (USACO Jan Bronze 2014)
    一个奇怪的绘图程序
    BZOJ 1002 [ FJOI 2007 ]
    BZOJ 3540 realtime-update 解题
    准备做的题目
    代码风格与树形DP
    CH round #55 Streaming #6
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/11619473.html
Copyright © 2011-2022 走看看