ReactJS / Chatbot with hooks

问题

I have a static chatbot where I can display the messages through this:

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

like this img:

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

and this is my chatbot:

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

But I would like to know how I could make it dynamic to display a message accordingly with what is typed in the text area and as a result call some function to check what was typed as a string and return a response. But I don't know how to resolve this situation. Basically I need to display a message typed by a user in the chat and send that message to my back-end (or some function of the front-end), then that function will send me a response.

For example: https://codesandbox.io/s/eager-torvalds-fyi77

回答1:

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

First of all, the above code should be changed to use a prop instead of hard-coding, like this:

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

Second, in your parent, you should connect your messages state to redux (or simply load messages in the component and save it in messages state), and pass it down as a prop to the above component.

Finally, once you submit a new message, you can call a sendMessage prop passed from the parent, which calls the API to send message. Also, you need to remember to update the current list of messages upon successfully sending it to the server, so your local state is up-to-date.

回答2:

In that case you've to keep your messages array in a state variable and add your messages dynamically on press of a button. You can do something like:

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

It's only an example, you can map it on your use case.

来源：https://stackoverflow.com/questions/59992794/reactjs-chatbot-with-hooks

标签

javascript

reactjs

chatbot