React如何写自动回复效果

React实现自动回复效果的方法

使用React实现自动回复效果可以通过状态管理、定时器和事件处理结合完成。以下是具体实现方式：

设置组件状态

初始化消息列表和输入框状态：

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

处理用户输入

创建输入框变更处理函数：

const handleInputChange = (e) => {
  setInputValue(e.target.value);
};

发送消息处理

实现消息发送和自动回复逻辑：

const handleSend = () => {
  if (!inputValue.trim()) return;

  const newMessage = { text: inputValue, isUser: true };
  setMessages(prev => [...prev, newMessage]);
  setInputValue('');

  setTimeout(() => {
    const replies = ["你好！", "我在呢", "请稍等", "明白了"];
    const randomReply = replies[Math.floor(Math.random() * replies.length)];
    setMessages(prev => [...prev, { text: randomReply, isUser: false }]);
  }, 1000);
};

完整组件示例

import React, { useState } from 'react';

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

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSend = () => {
    if (!inputValue.trim()) return;

    const newMessage = { text: inputValue, isUser: true };
    setMessages(prev => [...prev, newMessage]);
    setInputValue('');

    setTimeout(() => {
      const replies = ["你好！", "我在呢", "请稍等", "明白了"];
      const randomReply = replies[Math.floor(Math.random() * replies.length)];
      setMessages(prev => [...prev, { text: randomReply, isUser: false }]);
    }, 1000);
  };

  return (
    <div>
      <div style={{ height: '300px', overflowY: 'scroll', border: '1px solid #ccc' }}>
        {messages.map((msg, index) => (
          <div key={index} style={{ textAlign: msg.isUser ? 'right' : 'left' }}>
            {msg.text}
          </div>
        ))}
      </div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        onKeyPress={(e) => e.key === 'Enter' && handleSend()}
      />
      <button onClick={handleSend}>发送</button>
    </div>
  );
}

export default AutoReplyChat;

进阶优化方案

使用useReducer管理复杂状态：

const initialState = { messages: [] };

function chatReducer(state, action) {
  switch (action.type) {
    case 'ADD_MESSAGE':
      return { messages: [...state.messages, action.payload] };
    default:
      return state;
  }
}

// 在组件中使用
const [state, dispatch] = useReducer(chatReducer, initialState);

添加打字动画效果：

const [typing, setTyping] = useState(false);

// 在自动回复前设置状态
setTyping(true);
setTimeout(() => {
  setTyping(false);
  // 添加回复消息
}, 800);

样式优化建议

为消息添加气泡样式：

.message-bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 18px;
  margin: 4px 8px;
}

.user-message {
  background-color: #0084ff;
  color: white;
  margin-left: auto;
}

.bot-message {
  background-color: #f1f0f0;
  color: black;
}

实现这个自动回复系统时，可以根据实际需求调整回复逻辑、延迟时间和样式表现。更复杂的实现可以集成API调用或AI服务来生成智能回复。