ReactJS / 带钩子的聊天机器人

IT技术 javascript reactjs chatbot
2021-05-15 10:26:52

我有一个静态聊天机器人，可以通过以下方式显示消息：

<ChatMessage bot={true}>Hi.</ChatMessage>

像这样的img：

在此处输入图片说明

const ChatBot = () => {
  return (
    <Styled.ChatBox>
      <ChatMessage bot={true}>Hi.</ChatMessage>
      <ChatMessage bot={false}>Hello.</ChatMessage>
    </Styled.ChatBox>
  );
};

这是我的聊天机器人：

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

ChatMessage.defaultProps = {
  bot: false,
};

const Chat = props => {
  console.log(props.children);
  return (
    <Styled.ChatBox>
      <Styled.ChatHeader />
      <Styled.ChatLog>{props.children}</Styled.ChatLog>
      <Styled.ChatInput>
        <textarea placeholder="aaaaa ..." rows={4} />
        <button>Send</button>
      </Styled.ChatInput>
    </Styled.ChatBox>
  );
};

但是我想知道如何使它动态地显示与文本区域中键入的内容相应的消息，并因此调用一些函数来检查键入的内容并返回响应。但我不知道如何解决这种情况。基本上我需要在聊天中显示用户输入的消息并将该消息发送到我的后端（或前端的某些功能），然后该功能将向我发送响应。

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

2个回答
<Chat>
  <ChatMessage bot={true}>Hi.</ChatMessage>
  <ChatMessage bot={false}>Hello.</ChatMessage>
</Chat>

首先，上面的代码应该改成使用aprop而不是硬编码，像这样：

const ChatBot = ({ messages }) => {
  return (
    <Chat>
      {messages.map(message => <ChatMessage bot={message.fromBot}>{message.text}</ChatMessage>)}
    </Chat>
  );
};

其次，在你的父级中，你应该connect将messagesstate 转为 redux（或者简单地在组件中加载消息并将其保存在messagesstate 中），并将其作为 prop 传递给上述组件。

最后，一旦你提交了一条新消息，你就可以调用sendMessage从父级传递过来的一个prop，它调用 API 来发送消息。此外，您需要记住在成功将消息发送到服务器后更新当前的消息列表，以便您的本地状态是最新的。

在这种情况下，您必须将消息数组保持在状态变量中，并在按下按钮时动态添加消息。您可以执行以下操作：

import React, { useState } from 'react'

const YourComponent = () => {
  const [messages, setMessages] = useState([])
  const [text, setText] = useState('')

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

  return (
    <>
      <textarea onChange={e => setText(e.target.value)}>{text}</textarea>
      <button onClick={handleClick}>Submit</button>
    </>
  )
}

这只是一个示例，您可以将其映射到您的用例上。

其它你可能感兴趣的问题
上一篇getUserMedia API 不适用于 React 中的 iOS Safari 下一篇应用程序不会使用 MSAL (react-aad-msal) 从缓存中获取访问令牌