时间戳

首页 > 解决方案 > React Material UI onFocusOut

reactjs - React Material UI onFocusOut

问题描述

我目前使用

<TextField onChange={e => this.change(e, items)}

这会在我放入 TextField 的每个字母时触发，因此，我输入的文本会以慢动作填充。我在想，一旦用户键入所有内容并集中注意力，这个请求就会消失会更好。在这种情况下，我可以通过 React & Material UI TextField 使用什么样的事件？

标签： reactjsuitextfieldmaterial-ui

解决方案

当附加任何 DOM 事件时，拥有函数的去抖动版本非常有用。它将对该函数的调用次数减少到最低限度，从而提高了性能。

所以，你可以这样做：

import _ from 'lodash';

constructor(props) {
    super(props)

    this.onChangeDebounce = _.debounce(e => this.change(e, items), 300);
}

render() {
    ...
    onChange={e => this.onChangeDebounce(e)}
    ...
}

在这种情况下，我debounce只传递两个参数：

  1. 被速率限制的函数
  2. 以毫秒为单位的速率限制，即在触发函数之前等待的时间。

或者您可以使用 onBlur 事件，该事件可用于任何 DOM 元素。每当输入失去焦点时，就会发生 onBlur 事件。换句话说：当您从输入中移除光标时，它会失去“焦点”，或者变得“模糊”。

需要注意的是它没有关联的事件，因此，要达到您想要的，您可以使用字段值更新状态，然后在 onBlur 上从状态中检索此值。

在这里，您有一个小提琴这样做。

推荐阅读