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. ubuntu系统升级和其他相关操作记录

    之前在openstack中安装了ubuntu 12.04虚拟机,版本较低,需要升级为高版本.下面分享下升级过程: ubuntu系统升级操作:$ cat /etc/issueUbuntu 12.04.5 ...

  2. python-批量添加图片水印

    前言: 最近总是被无良公众号和培训机构拷贝文章,他们根本不会给你备注原文出处,这种行为真的让人不高兴,所以计划以后的文章都添加上自己的水印. 话不多说,直接上代码. 一.单张图片添加文字水印 # -* ...

  3. Indidual Homework Assignment

    一.Pair work的得与失 合作编程在以前的学习过程中也进行过,基本也就是各人负责一部分最后再将之拼凑起来,而这次作业要求的双人合作,要求的并不是这样,而是两人应该在一起进行工作,这样的要求理想情 ...

  4. Flask-论坛开发-5-memcached缓存系统

    对Flask感兴趣的,可以看下这个视频教程:http://study.163.com/course/courseLearn.htm?courseId=1004091002 ### 介绍:哪些情况下适合 ...

  5. 在win10开启HyperV(Pro以上版本)安装的Docker,如何远程管理其他机器(Linux或者Win)的docker容器

    用k8s能直接管理吗? 不把那个容器加入集群,可以吗?

  6. [转帖]2016年时的新闻:ASP.NET Core 1.0、ASP.NET MVC Core 1.0和Entity Framework Core 1.0

    ASP.NET Core 1.0.ASP.NET MVC Core 1.0和Entity Framework Core 1.0 http://www.cnblogs.com/webapi/p/5673 ...

  7. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 7. 条件循环

    条件循环能够让程序在条件成立时(即为真时)重复执行循环体中的语句.如果条件一直成立(即永远不会为假),则循环会一直进行下去,不会停止.如果初始时,条件不成立,则循环 1 次也不会执行.Python 中 ...

  8. java解析Json字符串之懒人大法

    面对Java解析Json字符串的需求,有很多开源工具供我们选择,如google的Gson.阿里巴巴的fastJson.在网上能找到大量的文章讲解这些工具的使用方法.我也是参考这些文章封装了自己的Jso ...

  9. Java代码封装redis工具类

    maven依赖关系: <dependency> <groupId>redis.clients</groupId> <artifactId>jedis&l ...

  10. LODOP选择路径,保存写入word文件

    之前的博文介绍了lodop和c-lodop如果使用 LODOP.GET_DIALOG_VALUE弹出对话框,让用户选择路径,例如保存文件的路径,这样用户就不用手动输入想要的路径. 这一篇,是利用上一篇 ...