您的位置：首页 > 编程技术 > js  >  react获取input输入框的值的方法示例

react获取input输入框的值的方法示例

 更新时间：2021年4月6日 20:00  点击：2137

react 获取input 输入框的值的多种方式

  • 第一种方式 非受控组件获取
  • 第二种方式 受控组件获取

非受控组件获取 ref

import React , {Component} from 'react';
export default class App extends Component{
 search(){
 const inpVal = this.input.value;
 console.log(inpVal);
 }
 
 render(){
 return(
  <div>
  <input type="text" ref={input => this.input = input} defaultValue="Hello"/>
  <button onClick={this.search.bind(this)}></button>
  </div>
 )
 }
}

使用defaultValue表示组件的默认状态，此时它只会被渲染一次，后续的渲染不起作用；input的值不随外部的改变而改变，由自己状态改变。

受控组件 this.setState({})

import React , {Component} from 'react';
export default class App extends Component{
 constructor(props){
 super(props);
 this.state = {
  inpValu:''
 }
 }
 
 handelChange(e){
 this.setState({
  inpValu:e.target.value
 })
 }
 
 render(){
 return(
  <div>
  <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/>
  </div>
 )
 }
}

input 输入框的值会随着用户输入的改变而改变，onChange通过对象e拿到改变之后的状态并更新state，setState根据新的状态触发视图渲染，完成更新。

到此这篇关于react获取input输入框的值的方法示例的文章就介绍到这了,更多相关react获取input输入框的值内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • C# 中如何取绝对值函数

    本文主要介绍了C# 中取绝对值的函数。具有很好的参考价值。下面跟着小编一起来看下吧...2020-06-25

  • PHP正则匹配img及标签各属性值（匹配图片函数）

    有一个项目要获取页面中所有img标签中的图片地址，这里我们使用到了preg_match_all正则函数，然后看我下面的一些参数即可实现了。 例 代码如下 复制代码 ...2016-11-25

  • php数组操作 键名比较 差集 交集赋值

    本文章提供在量的数据中级操作实例有如对键名比较计算数组的差集 计算差集 给指定数组中插入一个元素 反转数组 交集赋值新的数组实例。 //定义回调函数 funct...2016-11-25

  • 微信小程序 页面传值详解

    这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13

  • 关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误(解决方案)

    这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray＜id＜RCTBridgeModule＞＞错误，本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12

  • c# 判断是否为空然后赋值的4种实现方法

    下面小编就为大家分享一篇c# 判断是否为空然后赋值的4种实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25

  • JavaScript仿支付宝密码输入框

    那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签...2016-01-02

  • Mysql中 unique列插入重复值该怎么解决呢

    当unique列在一个UNIQUE键上插入包含重复值的记录时，我们可以控制MySQL如何处理这种情况：使用IGNORE关键字或者ON DUPLICATE KEY UPDATE子句跳过INSERT、中断操作或者更新旧记录为新值。mysql> create table menus(id t...2015-11-08

  • Python 字典一个键对应多个值的方法

    这篇文章主要介绍了Python 字典一个键对应多个值的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-09-29

  • antd Form组件方法getFieldsValue获取自定义组件的值操作

    这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29

  • postgresql重置序列起始值的操作

    这篇文章主要介绍了postgresql重置序列起始值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-04

  • vue 数据(data)赋值问题的解决方案

    这篇文章主要介绍了vue 数据(data)赋值问题的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-29

  • Java List集合返回值去掉中括号('[ ]')的操作

    这篇文章主要介绍了Java List集合返回值去掉中括号('[ ]')的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-29

  • C语言中求和、计算平均值、方差和标准差的实例

    这篇文章主要介绍了C语言中求和、计算平均值、方差和标准差的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-12-10

  • java中String类型变量的赋值问题介绍

    下面小编就为大家带来一篇java中String类型变量的赋值问题介绍。小编觉得挺不错的。现在分享给大家，给大家一个参考。...2016-03-28

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • vue:el-input输入时限制输入的类型操作

    这篇文章主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-05

  • React使用高德地图的实现示例(react-amap)

    这篇文章主要介绍了React使用高德地图的实现示例(react-amap)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-18

  • C#不同类型的成员变量(字段)的默认值介绍

    虽然C#编译器为每个类型都设置了默认类型，但作为面向对象的设计原则，我们还是需要对变量进行正确的初始化。实际上这也是C#推荐的做法...2020-06-25

  • JS双击变input框批量修改内容

    这篇文章主要介绍了JS双击变input框批量修改内容的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2017-01-09