<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. HTML5与移动端web学习笔记

    HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 ...

  2. URAL 1152. False Mirrors(DP)

    题目链接 理解了题意之后,就不难了..状态压缩+暴力. #include <cstring> #include <cstdio> #include <string> ...

  3. 一、午夜倒数《苹果iOS实例编程入门教程》

    该app为应用的功能为计算离午夜12:00点的剩余时间 现版本 SDK 8.4 Xcode 运行Xcode 选择 Create a new Xcode project ->Single View ...

  4. Javascript 异步编程的4种方法

    你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排 ...

  5. GraphicsMagick+im4java 图片处理

    最近团队内部分享GraphicsMagick+im4java 图片处理 就把如何安装,运行都统一整理一下. 详细如下: 在windows上安装ImageMagick: download 地址:http ...

  6. Web安全学习笔记之一

    浏览器基本策略:同源策略 同源策略规定:不同域的客户端脚本在没有明确授权的情况下,不能读写对方的资源. 同域与不同域:如http://www.text.com与https://www.text.com ...

  7. jquery_DOM操作

    DOM操作:DOM Core(核心),HTML_DOM,CSS_DOM CSS_DOM操作: css()获取或添加样式 opacity()透明设置 height()高度值 width()宽度 offs ...

  8. Datatable转换Json

    #region Datatable转换为Json        /// <summary>         /// Datatable转换为Json         /// </su ...

  9. MUI - DIV窗体切换

    神坑记录: 1.js报错异常:没有找到"innerHeight"属性? 解决方案:暂时不知原因,通过对mui.view.js进行调试得知是跳转目标页没有 .mui-navbar-l ...

  10. 【iCore3 双核心板】例程三十四:U_DISK_IAP_ARM实验——更新升级STM32

    实验指导书及代码包下载: http://pan.baidu.com/s/1pKabR7P iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...