React输入框输入单字符后失焦无法连续输入问题求助

输入框每输入一个字符就失焦，核心原因是输入框所在的子组件被频繁卸载后重新挂载，导致焦点丢失。结合你的代码来看，主要问题出在未定义的<Item>组件上：

1. 修复<Item>组件的定义问题 #

你导入了Material UI的Paper组件但未使用，同时代码中出现的<Item>既没有导入也没有在外部定义。如果<Item>是你在EmployeerMessage组件内部定义的，那么每次组件重新渲染时，Item都会被重新创建为一个全新的组件类型，导致其内部的输入框被强制卸载再挂载，自然无法保持焦点。

解决方法： #

直接用Material UI的Paper替换<Item>，或者将Item组件移到EmployeerMessage外部定义，同时补上缺失的sendMessage函数：

// 移到组件外部定义，避免每次渲染重新创建
const Item = ({ children }) => <Paper>{children}</Paper>;

export default function EmployeerMessage() {
  const [user, setUser] = useState(null);
  const [messages, setMessages] = useState([]);
  const [textMessage, setTextMessage] = useState('');
  const [file, setFile] = useState(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [rooms, setRooms] = useState([]);
  const [selectedRoomId, setSelectedRoomId] = useState('');

  // 补上发送消息的逻辑
  const sendMessage = () => {
    if (!textMessage.trim()) return;
    // 可根据实际需求扩展发送逻辑，比如更新消息列表
    setMessages(prev => [...prev, { content: textMessage, isUser: true }]);
    setTextMessage('');
  };

  return (
    <section className="messageEmployee">
      <Box>
        <Grid className='flexColumnRespo' container spacing={2} sx={{ py: 5 }}>
          <Grid item xs={12} xl={8} lg={7} md={7}>
            <Item>
              <Box>
                <Box
                  sx={{
                    display: "flex",
                    alignItems: "center",
                    py: 2,
                    px: 1,
                    borderTop: 1,
                    borderColor: "#E9E9E9",
                  }}
                >
                  <div className="chat-searchbox-wrap">
                    <input
                      type="text"
                      className="messageText"
                      value={textMessage}
                      onChange={(e) => setTextMessage(e.target.value)}
                    />
                    <button
                      style={{ cursor: "pointer" }}
                      onClick={sendMessage}
                      className="zzzz">
                      <span>Send</span>
                    </button>
                  </div>
                </Box>
              </Box>
            </Item>
          </Grid>
        </Grid>
      </Box>
    </section>
  );
}

2. 其他可能的排查点 #

• 检查父组件是否频繁传递变化的props给EmployeerMessage，导致组件频繁重新渲染。
• 避免在组件内部定义对象、数组字面量作为useEffect或子组件的依赖，这类不稳定依赖会触发不必要的渲染。
• 确认输入框没有被条件渲染逻辑包裹，防止输入触发状态变化时输入框被重新创建。

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