Question

我有一个静态聊天机器人，可以在其中显示消息但我想做些动态的事，即当键入或单击按钮时，我将文本保存在数组中好，我也将以某种方式将此消息发送到我的后端，然后发送回复，但我想不出该怎么做也就是说，将响应发送到后端，然后后端验证对消息的最佳响应我无法想到解决方案，即单击按钮发送消息并从textarea中删除消息（清除）并显示在我的聊天正文中

逻辑代码：

function ChatMessage(props) {
  return (
    <Styled.ChatMessage bot={props.bot}>{props.children}</Styled.ChatMessage>
  );
}

ChatMessage.defaultProps = {
  bot: false,
};

const Chat = props => {
  const [messages, setMessages] = useState([])
  const [text, setText] = useState('')
  const handleClick = () => {
    setMessages(prevMessages => [...prevMessages, text]);
    setText('');
  }

  return (
    <Styled.ChatBox>
      <Styled.ChatHeader />
      <Styled.ChatLog>{props.children}</Styled.ChatLog>
      <Styled.ChatInput>
      <textarea  placeholder="........."  onChange={e => setText(e.target.value)}>{text}</textarea>
      <button onClick={handleClick}>
        <FontAwesomeIcon
        className="searchIcon"
        icon={faPaperPlane}
        size="lg"
        color="black"
        />
      </button>
      </Styled.ChatInput>
    </Styled.ChatBox>
  );
};

export { Chat, ChatMessage };

演示：

import { Chat, ChatMessage } from './Chat';
const ChatBot = () => {
  return (
    <Chat>
      <ChatMessage bot={true}>Hadsssssssssssi.</ChatMessage>
      <ChatMessage bot={false}>Helldaadssssssso.</ChatMessage>
    </Chat>
  );
};

示例：https://codesandbox.io/s/eager-torvalds-fyi77

React JS / Hook动态聊天机器人

0 个答案: