react中实现删除输入框中的内容

import React,{Component} from 'react'
class Clear extends Component{
constructor(props){
super(props)
this.state={
data:''
}
}
updateState=(e)=>{
this.setState({data:e.target.value})
}
clearInput=()=>{
this.setState({data:''})
this.myInput.focus()
}
render(){
return(
<div>
<input value={this.state.data} onChange={this.updateState} ref={myInput=>this.myInput=myInput}></input>
<button onClick={this.clearInput}>Clear</button>
<h4>{this.state.data}</h4>
</div>
)
}
}
export default Clear

react实现删除输入框内容的更多相关文章

  1. [Android]自己定义带删除输入框

    在项目开发中,带删除button输入框也是人们经常常使用到的,该文章便介绍一下怎样创建一个带删除输入框.当中,须要解决的问题例如以下: a)创建自己定义editText类 b)在自己定义editTex ...

  2. TextWatcher-监听输入框内容变化

    今天在做邮件登录的时候,遇到了输入框(Edittext)监听事件(TextWatcher),现在记录下. 首先看如下代码 eText.addTextChangedListener(new TextWa ...

  3. input输入框内容变化实时监听

    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydown或者keyup事件一样,只能够检测通过键盘输入 ...

  4. 【react】input输入框可输入的最好实现方式

    使用的是refs.react中输入框不能直接定义value.输入框是可变的,react会提示报错.需要使用的inChange事件(输入框内容被改变时触发). 要定义输入框初始值,需要在componen ...

  5. 使用grep恢复被删除文件内容【转】

    http://www.cnblogs.com/ggjucheng/archive/2012/10/07/2714311.html Unix/Linux下,最危险的命令恐怕就属rm命令了,每次在root ...

  6. chrome 31删除输入框的历史记录

    chrome 31删除输入框的历史记录 TMD居然要用Shift + delete 了....  为毛!!!

  7. Linux Vi 删除全部内容,删除某行到结尾,删除某段内容 的方法

    1.打开文件 vi filename 2.转到文件结尾 G 或转到第9行 9G 3.删除所有内容(先用G转到文件尾) ,使用: :1,.d 或者删除第9行到第200行的内容(先用200G转到第200行 ...

  8. 【转】【JavaScript】禁用backspace键的后退功能,但是可以删除文本内容

    在JavaScript中添加以下代码,就可实现 禁用backspace键的后退功能,但是可以删除文本内容 // 禁用backspace键的后退功能,但是可以删除文本内容 document.onkeyd ...

  9. Java基础知识强化之IO流笔记15:递归之删除带内容的目录案例

    1. 需求:递归删除带内容的目录 分析:   (1)封装目录   (2)获取该目录下的所有文件或者文件夹的File数组   (3)遍历该File数组,得到每一个File对象   (4)判断该File对 ...

随机推荐

  1. Redis+Keepalived高可用环境部署记录

    Keepalived 实现VRRP(虚拟路由冗余)协议,从路由级别实现VIP切换,可以完全避免类似heartbeat脑裂问题,可以很好的实现主从.主备.互备方案,尤其是无状态业务,有状态业务就需要额外 ...

  2. python报错问题解决:'ascii' codec can't encode character

    之前部署了openstack虚拟化环境,有一天在使用nova list查看虚拟机的时候,突然报错!如下: [root@linux-node1 src]# nova listERROR (Unicode ...

  3. PHP从入门到精通(二)

     PHP从入门到精通 之PHP中的函数 各位开发者朋友大家好,自上次更新PHP的相关知识,得到了大家的广泛支持.PHP的火爆程度不言而喻,函数作为PHP中极为重要的部分,应诸位的支持,博主继续跟进更新 ...

  4. Dubbo原理和源码解析之“微内核+插件”机制

    github新增仓库 "dubbo-read"(点此查看),集合所有<Dubbo原理和源码解析>系列文章,后续将继续补充该系列,同时将针对Dubbo所做的功能扩展也进行 ...

  5. Python_函数_复习_习题_24

    # 函数 # 可读性强 复用性强# def 函数名(): # 函数体 #return 返回值# 所有的函数 只定义不调用就一定不执行 #先定义后调用 #函数名() #不接收返回值#返回值 = 函数名( ...

  6. c#词频统计命令行程序

    这里将用c#写一个关于词频统计的命令行程序. 预计时间分配:输入处理3h.词条排序打印2h.测试3h. 实际时间分配:输入处理1h.词条排序打印2h.测试3h.程序改进优化6h. 下面将讲解程序的完成 ...

  7. Ajax进阶 FormData对象

    Ajax基础:http://www.cnblogs.com/-beyond/p/7919369.html xhr 2.0及FormData介绍 FormData对象 其实和 XMLHttpReques ...

  8. TCP的TIME_WAIT

    http://www.cnblogs.com/dadonggg/p/8778318.html http://www.firefoxbug.com/index.php/archives/2795/ ht ...

  9. Vue的filter属性

    Vue.filter('sss',function(data){ //可以使用逻辑处理数据 data += '123'; return data*10; }) new Vue({ el:'#app', ...

  10. 彻底弄懂jsonp原理及实现方法

    一. 同源策略 所有支持Javascript的浏览器都会使用同源策略这个安全策略.看看百度的解释: 同源策略,它是由Netscape提出的一个著名的安全策略. 现在所有支持JavaScript 的浏览 ...