咨询Material UI TextField失焦事件：如何实现输入框进入与离开事件

当然有啦！你要找的输入框失焦事件就是onBlur——这是React原生的焦点事件，Material UI v4.6.1版本的TextField完全支持它，和你已经在用的onFocus刚好是一对儿~

核心说明： #

• onFocus：输入框获得焦点（进入输入框）时触发，就是你已经在使用的那个事件
• onBlur：输入框失去焦点（离开输入框）时触发，这正是你需要的“离开事件”

Material UI的TextField会把这些React合成事件透传到底层的原生<input>元素上，所以直接添加这个属性就行，完全适配你当前的技术栈版本。

修改后的代码示例： #

<TextField
  value={this.state.fieldFirstName}
  onChange={(e: any) => this.onChangeFieldFirstName(e.target.value)}
  onFocus={() => this.onFocusFieldFirstName()}
  onBlur={() => this.onBlurFieldFirstName()} {/* 新增的失焦事件 */}
/>

如果需要在失焦事件中获取事件对象（比如输入框的值、DOM元素信息），也可以像onChange那样传入事件参数：

onBlur={(e: React.FocusEvent<HTMLInputElement>) => this.onBlurFieldFirstName(e)}

内容的提问来源于stack exchange，提问作者Socrates