使用房间时清除Socket React应用中的消息输入

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';

const ChatRoom = () => {
  const [message, setMessage] = useState('');
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = io('服务器地址');
    setSocket(newSocket);

    return () => {
      newSocket.disconnect(); // 在组件卸载时断开Socket连接
    };
  }, []);

  // 处理消息输入框变化
  const handleInputChange = (e) => {
    setMessage(e.target.value);
  };

  // 发送消息
  const sendMessage = () => {
    if (socket && message.trim() !== '') {
      socket.emit('message', message);
      setMessage('');
    }
  };

  return (
    <div>
      <input type="text" value={message} onChange={handleInputChange} />
      <button onClick={sendMessage}>发送</button>
    </div>
  );
};

export default ChatRoom;