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>
)
}
}
React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式的更多相关文章
- React中ref的使用方法
React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...
- React中Ref 的使用 React-踩坑记_05
React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
- jQuery中设置form表单中action值的方法
jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈 html代码: <form id="myFormId&quo ...
- form表单中get和post两种提交方式的区别
一.form表单中get和post两种提交方式的区别? 1.get提交表单中的内容在链接处是可见的.post不可见 2.post相比于get是安全的 3.post不收限制大小,get有限制大小(黑马视 ...
- JS中new Date()用法及获取服务器时间
1.获取服务器时间: var now = new Date($.ajax({async: false}).getResponseHeader("Date")); 2.new Dat ...
- Form表单中method=post/get两种数据传输的方式的区别
Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际传输时确有很大的不同,并且可能会对数据产生严重的影响.虽然为了方便的得到变量值,Web容器已经屏蔽了二者的一 ...
- C#、Python中分别是怎么实现通过字符串获取实体类的值以及给实体类赋值
一.引入 最近遇到一个项目里面的功能,在给实体类赋值的时候,由于赋值字段是动态生成的,所以如果用常用的方法(直接实体类的名称.字段名=要赋的值),将会生成很多无用的代码,所以找到了一个通过反射的赋值与 ...
- React中ref的用法
在React数据流中,父子组件唯一的通信方式是通过props属性:那么如果有些场景需要获取某一个真实的DOM元素来交互,这时候就要用到React的refs属性. 1.可以给DOM元素添加ref属性 c ...
随机推荐
- C++学习七 C++实现add(1)(2)(3)
一.代码实现: class Yoba { public: Yoba(int n) : _n(n) {} Yoba operator() (int n) { return Yoba(_n + n); } ...
- Jenkins显示reportng测试报告
在搭建Jenkins自动化测试平台后,我们点击立即构建就可以运行测试用例了,但没有地方查看测试报告,现在写这篇博客总结怎么在Jenkins显示reportng测试报告. 在maven项目配置repor ...
- [C4W3] Convolutional Neural Networks - Object detection
第三周 目标检测(Object detection) 目标定位(Object localization) 大家好,欢迎回来,这一周我们学习的主要内容是对象检测,它是计算机视觉领域中一个新兴的应用方向, ...
- Dockerfil
Dockerfile简介 dockerfile 是一个文本格式的配置文件, 用户可以使用 Dockerfile 来快速创建自定义的镜像,另外,使用Dockerfile去构建镜像好比使用pom去构建ma ...
- 第一行代码 Android (郭霖 著)
https://github.com/guolindev/booksource 第1章 开始启程----你的第一行Android代码 (已看) 第2章 先从看得到的入手----探究活动 (已看) 第3 ...
- Java List<T> 去重
1.List<T>,是个泛型,实际业务里,它经常是一个bean,例如Person类,里面有age.name等属性. 2.如果List<Person> ps 有重复的数据,我们 ...
- argparse.ArgumentParser()用法解析
本博客主要本人学习记录用. 内容来源 于博客:https://blog.csdn.net/the_time_runner/article/details/97941409 argparse模块官方文档 ...
- Java 银联云闪付对接记录
一开始盲目找资料走了弯路: 还是从银联给的官方文档入手最高效: 附件3:云闪付业务商户入网服务指引.pdf http://tomas.test.upcdn.net/pay/%E9%99%84%E4%B ...
- 配置每次git push 不需要输入账号密码
配置每次git push 不需要输入账号密码 .gitconfig文件地址 C:\Users\Admin
- Kafka学习笔记之Kafka High Availability(下)
0x00 摘要 本文在上篇文章基础上,更加深入讲解了Kafka的HA机制,主要阐述了HA相关各种场景,如Broker failover,Controller failover,Topic创建/删除,B ...