MUI 仅处理 onBlur 和 onKeyPress 之一

Question

我目前正在处理一个 TypeScript 和 Material-UI 项目。我的目标是管理 TextField 组件的 onBlur 事件和 onEnter 按键事件。

场景如下：我已将此文本字段集成到菜单中。当用户在字段中键入内容然后在菜单外部单击时，我想使用 onBlur 事件存储输入的值。但是，我还需要捕获按下 Enter 键时的值。出现这个问题是因为按 Enter 键会触发 onKeyDown 事件和 onBlur，导致该函数在我保存值的地方被调用两次。

我已经搜索过在线和其他 stackoverflow 帖子，但没有找到解决此问题的解决方案（可能是因为 TS 并且无法与其他事件一起调用）。

任何帮助或指导将不胜感激。

Answer 1

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

const MyComponent = () => {
const [value, setValue] = useState('');
const [enterPressed, setEnterPressed] = useState(false);

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter') {
  setEnterPressed(true);
  // Handle saving the value when Enter is pressed
  saveValue();
 }
 };

const handleBlur = () => {
// Check if Enter was pressed, if so, do not save the value again
if (!enterPressed) {
  // Handle saving the value on blur
  saveValue();
}
// Reset the enterPressed state
setEnterPressed(false);
};

const saveValue = () => {
// Save the entered value (you can replace this with your logic)
console.log('Value to save:', value);
// Clear the input or perform any necessary actions
setValue('');
};

return (
<TextField
  value={value}
  onChange={(e) => setValue(e.target.value)}
  onKeyDown={handleKeyDown}
  onBlur={handleBlur}
  label="Enter value"
  variant="outlined"
 />
 );
 };

 export default MyComponent;

要使用 TypeScript 和 Material-UI 处理 TextField 组件中的 onBlur 事件和 Enter 按键事件，您可以结合使用状态管理和事件处理来实现您的目标。

一种方法是使用状态变量来跟踪 Enter 键是否被按下。在处理 onKeyDown 事件时，您可以相应地设置此状态，并使用它来防止按下 Enter 时触发 onBlur 事件。