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

简介: 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>
        )
    }
}
相关文章
|
1月前
|
前端开发 JavaScript API
第八章 react组件实例中三大属性之ref
第八章 react组件实例中三大属性之ref
|
11天前
|
存储 前端开发 数据可视化
React 中重新实现强制实施表单
React 中重新实现强制实施表单
|
23天前
|
监控 前端开发 搜索推荐
react 表单受控的现代实现方案
`react-form-simple`是一个轻量级的React表单库,专注于简化受控表单的开发,提供数据绑定、验证、错误处理和UI更新等功能。它通过简洁的API减少复杂性,支持第三方UI库集成,并具备高度可扩展性。核心特点包括基于Proxy的数据绑定、实时错误处理、高效的UI更新和灵活的使用方式。通过`useForm`和`render`等钩子,开发者可以快速构建表单应用,同时支持动态表单和自定义验证规则。该库旨在提高开发效率,适用于复杂表单场景,降低学习和维护成本。
131 2
react 表单受控的现代实现方案
|
1月前
|
存储 前端开发 JavaScript
React的表单处理:受控组件与非受控组件深入解析
【4月更文挑战第25天】React表单处理涉及受控和非受控组件。受控组件通过状态管理表单数据,每次用户输入都触发状态更新,确保数据同步,适合实时交互但可能影响性能。非受控组件不直接管理状态,数据存储在DOM中,简化代码,适用于更新不频繁的场景,但在数据验证和同步上存在挑战。开发者应根据需求灵活选择。
|
1月前
|
前端开发 JavaScript
深入了解 React 中的 Ref:不是魔法,是超级工具
深入了解 React 中的 Ref:不是魔法,是超级工具
|
1月前
|
前端开发 UED
React 防抖与节流用法
React 防抖与节流用法
48 0
|
1月前
|
前端开发 JavaScript
react中refs的作用是什么?有几种用法?
react中refs的作用是什么?有几种用法?
|
1月前
|
JavaScript 前端开发 Java
React 中的 ref 和 refs:解锁更多可能性(下)
React 中的 ref 和 refs:解锁更多可能性(下)
React 中的 ref 和 refs:解锁更多可能性(下)
|
1月前
|
JavaScript 前端开发 测试技术
React 中的 ref 和 refs:解锁更多可能性(上)
React 中的 ref 和 refs:解锁更多可能性(上)
React 中的 ref 和 refs:解锁更多可能性(上)
|
1月前
|
前端开发 JavaScript API
【第46期】一文了解React表单
【第46期】一文了解React表单
14 0