Saya sedang mengembangkan chatbot menggunakan React. Saya ingin menampilkan pesan setelah efek pengetikan selama 1 detik, seperti yang dijelaskan dalam kode sumber.

Berikut ini contohnya:

enter image description here

Saya tidak memiliki gambar implementasinya, jadi saya ingin meminta bantuan Anda.

import React from "react";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import Ebisuke from "../assets/img/ebisuke.jpg";

import { TypingBalls } from "./index";

const Chat = (props) => {
  const isQuestion = props.type === "question";
  const classes = isQuestion ? "p-chat__row" : "p-chat__reverse";

  return (
    <>
      <ListItem className={classes}>
        {isQuestion && (
          <ListItemAvatar>
            <Avatar alt="icon" src={Ebisuke} />
          </ListItemAvatar>
        )}

        // display typing effect for 1 second
        <div className="p-chat__typing-balls-bubble">
          <TypingBalls />
        </div>

        // display message after typing effect
        <div
          className="p-chat__bubble"
          dangerouslySetInnerHTML={{ __html: props.text }}
        />

      </ListItem>
    </>
  );
};

export default Chat;
0
Jun 7 Juli 2020, 18:07

1 menjawab

Jawaban Terbaik

Salah satu cara untuk melakukannya adalah dengan menambahkan useEffect untuk props.text yang diterima di komponen. Tambahkan status untuk mengontrol tahap di mana Anda berada - MENGETIK atau SELESAI. Di dalam useEffect, setel stage ke TYPING terlebih dahulu. Tambahkan setTimeout satu detik, setelah itu alihkan status ke DONE.

Mungkin, blok kode ini akan membantu.

const [stage, setStage] = useState('TYPING');
const { text } = props;
useEffect(() => {
  setStage("TYPING");
  setTimeout(() => {
    setStage("DONE");
  }, 1000);
}, [text]);

Dengan menggunakan status stage, Anda dapat beralih antara TypingBalls dan chat bubble.

return (
    <>
      <ListItem className={classes}>
        {isQuestion && (
          <ListItemAvatar>
            <Avatar alt="icon" src={Ebisuke} />
          </ListItemAvatar>
        )}

        {stage === 'TYPING' ? (
          <div className="p-chat__typing-balls-bubble">
            <TypingBalls />
          </div>
        ) : (
          <div
            className="p-chat__bubble"
            dangerouslySetInnerHTML={{ __html: props.text }}
          />
        )}
      </ListItem>
    </>
  );

Periksa tautan CodeSandbox ini contoh yang disederhanakan.

1
himayan 7 Juli 2020, 15:47