Material UI输入框失焦/模糊 清空内容后标签未归位问题咨询

问题原因 #

你使用的Material UI Input组件属于带状态的封装组件，其标签位置、样式等UI表现是和组件内部维护的输入值状态绑定的。你直接通过ref操作原生DOM修改输入框value、调用blur方法，都不会同步更新组件的内部状态，组件始终认为输入框内存在内容，因此标签不会复位到初始位置，手动调用blur也不会生效。

解决方法 #

方案1：使用受控组件（官方推荐）

通过React state管理输入框的值，状态变更后组件会自动同步UI表现，无需操作DOM：

import { useState } from 'react';
import Input from '@mui/material/Input';

// 组件内部逻辑
const [inputValue, setInputValue] = useState('');

const clearInput = () => {
  setInputValue('');
};

return (
  <div>
    <Input
      id="outlined-basic" 
      label="Outlined" 
      variant="outlined"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
    <button onClick={clearInput}>Clear</button>
  </div>
);

方案2：非受控组件手动触发更新

如果你坚持使用非受控模式不通过state管理值，可以在修改DOM值后手动派发输入事件，通知组件值已变更：

import { useRef } from 'react';
import Input from '@mui/material/Input';

const searchInput = useRef(null);

const clearInput = () => {
  searchInput.current.value = '';
  // 手动派发input事件，让组件感知到值变化
  const inputEvent = new Event('input', { bubbles: true });
  searchInput.current.dispatchEvent(inputEvent);
  searchInput.current.blur();
};

return (
  <div>
    <Input
      inputRef={searchInput} 
      id="outlined-basic" 
      label="Outlined" 
      variant="outlined"
    />
    <button onClick={clearInput}>Clear</button>
  </div>
);

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