反应 Material UI onFocusOut

Question

我目前使用

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

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

Answer 1

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

所以，你可以这样做：

import _ from 'lodash';

constructor(props) {
    super(props)

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

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

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

要限速的函数
速率限制（以毫秒为单位），即触发函数之前等待的时间。

或您可以使用 onBlur 事件，该事件可用于任何 DOM 元素。只要输入失去焦点，就会发生 onBlur 事件。换句话说：当您从输入中移除光标时，它会丢失 "focus"，或变为 "blurry"。

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

这里有一个 fiddle 正在执行此操作。

Answer 2

一年半后，这里有一个主要用于功能组件的现代方法：

将字段的值保留为 React state。
设置onChange
坚持（或做任何昂贵的过程）onBlur

因此，包含此文本字段的组件在某种程度上类似于：

import React, { useState } from 'react'
import { TextField } from '@material-ui/core'

const MyFunctionalComponent = () => {

  const [textFieldValue, setTextFieldValue] = useState('') 
  // ...

  return (
    <React.Fragment>
      {/** ...  */}
      <TextField
        value={textFieldValue}
        onChange={(e) => setTextFieldValue(e.target.value)}
        onBlur={() => {
          console.log(`I am blurred and ready to process ${textFieldValue}`)
        }}
      />
      {/** ... */}
    </React.Fragment>
  )
}

反应 Material UI onFocusOut

React Material UI onFocusOut

uitextfield

reactjs

material-ui