<div className={ this.state.focus ? "dis_bottom_left_onfocus" : "dis_bottom_left" } ref="bottom_left">
<input
type="text"
className="dis_bottom_input"
ref="bottom_input"
placeholder={this.props.mainName || "说点什么吧"}
onBlur={ ::this.inputOnBlur }
onFocus={ ::this.inputOnFocus } />
</div>
//input 获取焦点 width: 100%
inputOnFocus(){
this.setState({ focus: true });
} //input 失去焦点
inputOnBlur(){
this.setState({ focus: false });
}

react input 获取/失去焦点的更多相关文章

  1. 当input获取倒焦点的时候,获得输入内容

    描述:当用户点击输入框时,获取到他在input里输入的内容 $().keyup(function(){ $(this).val(); }) $(this).val()==this.value; $(t ...

  2. input获取永久焦点

    $(function () { $('#test').blur(function () { var that = this; //或者用闭包 setTimeout(function () { $(th ...

  3. js 获取当前焦点所在的元素、给元素和input控件添加键盘监听事件、添加页面级的键盘监听事件

    页面级的键盘监听事件 document.onkeydown = function (event) { var e = event || window.event || arguments.callee ...

  4. python坑之input获取字符串

    space = input("set user quotation:").strip() quotation = int(space* 1024 * 1024) print(quo ...

  5. react input的几个坑

    [react input的几个坑] 1.input标签中设置value后,input进入controlled模式,valuechange由自动变为手动,导致input无法编辑.如: <input ...

  6. WPF设置控件获取键盘焦点时的样式FocusVisualStyle

    控件获取焦点除了用鼠标外,可以通过键盘来获取,比如Tab键或者方向键等,需要设置控件获取键盘焦点时的样式,可以通过设置FrameworkElemnt.FocusVisualStyle属性, 因为几乎所 ...

  7. React onPaste 获取粘贴板的值

    React 中, 获取 粘贴板的值, 使用下面的方法 console.log(e.clipboardData.getData('Text')); 如果是 JS 中的 onpaste 事件, 则使用 v ...

  8. select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题

      select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法: 把页面中的 tabindex="-1" 删掉, 或者值改为1 代码片 ...

  9. 哪种方式更适合在React中获取数据?

    作者:Dmitri Pavlutin 译者:小维FE 原文:dmitripavlutin.com 国外文章,笔者采用意译的方式,以保证文章的可读性. 当执行像数据获取这样的I/O操作时,你必须发起获取 ...

随机推荐

  1. NOIp 2014 #3 寻找道路 Label:图论

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 .路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 .在满足条 ...

  2. css3+js打造炫酷图片展示

    <!DOCTYPE html> <html onselectstart="return false"> <!-- onselectstart=&quo ...

  3. 【异常】java.lang.LinkageError: loader constraints violated

    [问题背景]      南非客户帐单提醒功能过程中的一个问题,当启动服务器后,后台报java.lang.LinkageError: loader constraints violated when l ...

  4. Spring整合Hibernate之AnnotationSessionFactoryBean与LocalSessionFactoryBean

    spring集成hibernate由两种形式 1.继续使用Hibernate的映射文件*.hbm.xml 2.使用jpa形式的pojo对象, 去掉*.hbm.xml文件 一.继续使用Hibernate ...

  5. 用CSS设置Table的细边框的最好用的方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. iOS开发-定制多样式二维码

    iOS开发-定制多样式二维码   二维码/条形码是按照某种特定的几何图形按一定规律在平台(一维/二维方向上)分布的黑白相间的图形纪录符号信息.使用若干个与二进制对应的几何形体来表示文字数值信息. 最常 ...

  7. [LintCode] Plus One 加一运算

    Given a non-negative number represented as an array of digits, plus one to the number. The digits ar ...

  8. apache中.htaccess不起作用

    找到apache的配置文件httpd.conf文件,找到:  代码如下 复制代码 #LoadModule rewrite_module modules/mod_rewrite.so 去掉前面的#号. ...

  9. Introduction of Team Member

    1. 姓名:xx 性别:男 出生日期:1993.04.16 班级:110616班 职务:小班长 爱好:唱歌.排球 2. 姓名:xxx 性别:男 出生日期:1993.4.20 3. 姓名:xxx 性别: ...

  10. Runtime Error---Description: An application error occurred on the server....

    [原]Runtime Error---Description: An application error occurred on the server.... 2010-1-7阅读2010 评论3 D ...