ReactJS / 带有钩子的聊天机器人

Question

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

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

喜欢这张图片：

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

Answer 1

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

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>
    </>
  )
}

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

Answer 2

<Chat>
  <ChatMessage bot={true}>Hi.</ChatMessage>
  <ChatMessage bot={false}>Hello.</ChatMessage>
</Chat>

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

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

其次，在你的父级中，你应该将connect你的messages状态转换为redux（或者干脆在组件中加载消息并将其保存在messages状态），并将其作为道具传递给上述组件.

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