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. 网站每日PV/IP统计/总带宽/URL统计脚本分享(依据网站访问日志)

    在平时的运维工作中,我们运维人员需要清楚自己网站每天的总访问量.总带宽.ip统计和url统计等.虽然网站已经在服务商那里做了CDN加速,所以网站流量压力都在前方CDN层了像每日PV,带宽,ip统计等数 ...

  2. kvm虚拟化关闭虚拟网卡virbr0的方法

    我们知道:kvm虚拟化环境安装好后,ifconfig会发现多了一个虚拟网卡virbr0这是由于安装和启用了libvirt服务后生成的,libvirt在服务器(host)上生成一个 virtual ne ...

  3. require.ensure的用法;异步加载-代码分割;

    webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...

  4. linux-镜像下载

    https://blog.csdn.net/sinat_36564972/article/details/81560395 Centos6.5镜像下载 2018年08月10日 11:35:53 深夜搬 ...

  5. 实验三 Java敏捷开发与xp实现

    实验内容: 1. XP基础 2. XP核心实践 3. 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实 ...

  6. Linux内核分析作业六

    1.阅读理解task_struct数据结构 2.分析fork函数对应的内核处理过程sys_clone,理解创建一个新进程如何创建和修改task_struct数据结构: fork进程的代码 #inclu ...

  7. python语言几个常见函数的使用

    写代码,有如下变量,请按照要求实现每个功能: name = " Kobe Bean Bryant" a. 移除 name 变量对应的值左边的空格,并输出移除后的内容 name = ...

  8. MyEclipse项目里面出现红叉的解决方案?

    一般出现在从别处import的项目上,只有项目文件夹上有红叉,其他地方都正常,现总结个人的几个解决方案:   有几种可能: 1,编码设置是否一致,也即是你项目原来的编码和现在eclipse用的默认编码 ...

  9. 开始第一段SPRINT

    四则运算Sprint计划 1.小组成员: 李豌湄:master 江丹仪:产品负责人 2.现状: 初步有一个四则运算的程序代码, 我们这个团队的编程基础比较薄弱,还不知道怎么将程序与数据库连接,也是在边 ...

  10. .Net反编译软件

    .Net反编译软件 https://www.cnblogs.com/xiandnc/p/10132491.html 一说起.net的反编译软件,大家首先想到的就是Reflector,ILSpy,dot ...