Question

我目前正在使用

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

在我输入到TextField中的每个字母时都会触发此操作，因此，我键入的文本会以慢动作填充。我当时认为，一旦用户键入所有内容并将焦点移开，此请求就消失了会更好。在这种情况下，我可以使用React＆Material UI TextField使用哪种事件？

Answer 1

一年半后，这是一种主要针对功能组件的现代方法：

将字段的值保留为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>
  )
}

Answer 2

在附加任何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事件。换句话说：当您从输入中删除光标时，它会失去“焦点”或变成“模糊”。

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

在这里，您有fiddle这样做。

React Material UI onFocusOut

2 个答案: