React 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传递了两个参数：

以毫秒为单位的rate-limited

• The

1. 函数，即函数被触发前的等待时间。

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

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

在这里，您有一个fiddle来做这件事。

Answer 2

一年半后，这里是一种当代的方法，主要用于功能组件：

作为React state.

• Set it onChange

• Persist (或执行任何开销较大的进程) 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>
  )
}