当前位置：首页 > React

react实现聊天框

2026-01-26 21:12:45React

实现聊天框的基本结构

使用 React 创建一个聊天框需要定义组件结构，包括消息列表、输入框和发送按钮。以下是一个基础实现：

import React, { useState } from 'react';

function ChatBox() {
  const [messages, setMessages] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleSend = () => {
    if (inputValue.trim()) {
      setMessages([...messages, { text: inputValue, sender: 'user' }]);
      setInputValue('');
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index} className={`message ${msg.sender}`}>
            {msg.text}
          </div>
        ))}
      </div>
      <div className="input-area">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
        />
        <button onClick={handleSend}>Send</button>
      </div>
    </div>
  );
}

export default ChatBox;

样式设计

通过 CSS 美化聊天框，区分用户消息和接收消息的样式：

.chat-container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.messages {
  height: 400px;
  padding: 10px;
  overflow-y: auto;
}

.message {
  margin: 5px 0;
  padding: 8px;
  border-radius: 4px;
  max-width: 80%;
}

.message.user {
  background: #007bff;
  color: white;
  align-self: flex-end;
}

.message.bot {
  background: #f1f1f1;
  color: #333;
  align-self: flex-start;
}

.input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.input-area input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-area button {
  margin-left: 10px;
  padding: 8px 15px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

模拟回复功能

添加自动回复逻辑，模拟聊天机器人响应：

const handleSend = () => {
  if (inputValue.trim()) {
    const newMessages = [...messages, { text: inputValue, sender: 'user' }];
    setMessages(newMessages);
    setInputValue('');

    // 模拟回复
    setTimeout(() => {
      setMessages([...newMessages, { text: 'Hello! This is a reply.', sender: 'bot' }]);
    }, 1000);
  }
};

滚动到底部

确保新消息发送后自动滚动到消息列表底部：

import React, { useState, useEffect, useRef } from 'react';

function ChatBox() {
  const messagesEndRef = useRef(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  return (
    <div className="messages">
      {messages.map((msg, index) => (
        <div key={index} className={`message ${msg.sender}`}>
          {msg.text}
        </div>
      ))}
      <div ref={messagesEndRef} />
    </div>
  );
}

集成 WebSocket

如果需要实时通信，可以集成 WebSocket 实现双向消息传递：

useEffect(() => {
  const socket = new WebSocket('ws://your-websocket-url');

  socket.onmessage = (event) => {
    setMessages(prev => [...prev, { text: event.data, sender: 'bot' }]);
  };

  return () => socket.close();
}, []);

const handleSend = () => {
  if (inputValue.trim()) {
    socket.send(inputValue);
    setMessages([...messages, { text: inputValue, sender: 'user' }]);
    setInputValue('');
  }
};

通过以上步骤，可以实现一个功能完整的 React 聊天框，支持样式定制、自动回复和实时通信。

react实现聊天框