React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式


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>
 ) } }


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM