React组件（基于MUI TextField）onBlur验证失败后重聚焦问题咨询

核心思路 #

要实现验证不通过时焦点保留在输入框，需要通过ref获取底层input DOM元素，在验证失败时调用其focus()方法。具体需要修改封装的TextBox组件支持ref转发，并在父组件中利用ref执行聚焦操作。

步骤1：修改TextBox组件，支持ref转发 #

使用React的forwardRef将父组件传递的ref转发到MUI TextField的底层input元素（通过inputRef属性）：

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

const TextBox = forwardRef(({ className, label, onChange, type, value, width, onBlur, children }, ref) => {
  return (
    <TextField
      sx={{
        '& .MuiOutlinedInput-root': {
          '& > fieldset': { borderColor: 'gray' },
        },
        minWidth: width,
        bgcolor: '#1a1a1a',
      }}
      variant="outlined"
      size="small"
      className={className}
      type={type}
      label={label}
      onChange={onChange}
      onBlur={onBlur}
      value={value}
      inputRef={ref} // 将父组件的ref绑定到底层input元素
    >
      {children}
    </TextField>
  );
});

export default TextBox;

步骤2：父组件中使用ref控制焦点 #

在父组件中创建useRef，传递给TextBox，并在验证失败时调用focus()方法：

import { useRef, useState } from 'react';
import TextBox from './TextBox';

function YourParentComponent() {
  const [phone, setPhone] = useState('');
  // 创建ref引用输入框
  const phoneInputRef = useRef(null);

  // 示例手机号验证逻辑，可根据需求修改
  const validatePhone = (value) => {
    return /^1\d{10}$/.test(value);
  };

  return (
    <TextBox
      className="phone-data"
      value={phone}
      onChange={(e) => setPhone(e.target.value)}
      ref={phoneInputRef} // 将ref传递给TextBox
      onBlur={() => {
        if (!validatePhone(phone)) {
          alert('Phone number is not valid');
          setPhone('');
          // 延迟执行聚焦，确保状态更新后DOM已完成渲染
          setTimeout(() => {
            phoneInputRef.current?.focus();
          }, 0);
        }
      }}
    />
  );
}

export default YourParentComponent;

关键说明 #

• forwardRef：让函数组件能够接收父组件传递的ref，并转发到内部的DOM元素或子组件。
• inputRef：MUI TextField提供的属性，用于直接获取底层的input DOM元素，而非TextField组件实例。
• setTimeout：因为setPhone是异步状态更新，延迟执行聚焦可以避免React渲染未完成时的DOM状态不一致问题。
• 可选链?.：防止ref未挂载时调用focus()导致报错，提升代码健壮性。

内容的提问来源于stack exchange，提问作者user2113260