ReactJS / Чатбот с крючками

Question

У меня есть чат-чат * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *.}. *

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

Но я хотел бы знать, как я могу сделать это динамически c для отображать сообщение в соответствии с тем, что набрано в текстовой области, и в результате вызвать некоторую функцию, чтобы проверить, что было введено в виде строки, и вернуть ответ. Но я не знаю, как решить эту ситуацию. В основном мне нужно отобразить сообщение, набранное пользователем в чате, и отправить это сообщение моему бэкэнду (или какой-либо функции внешнего интерфейса), тогда эта функция отправит мне ответ.

Для Пример: 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 состояние для редукции (или просто загрузка сообщений в компонент и сохранение его в состоянии messages) и передача его в качестве опоры вышеупомянутому компоненту.

Наконец, после отправки новое сообщение, вы можете вызвать sendMessage реквизит, переданный от родителя, который вызывает API для отправки сообщения. Кроме того, вам необходимо помнить об обновлении текущего списка сообщений после успешной отправки его на сервер, чтобы ваше местное состояние было актуальным.