1

我在我的 React 应用程序中使用 Prismjs，一切正常。每当我使用键盘箭头移动它时，我都会出现插入符号显示滞后。在标准输入/文本区域中，它看起来像是插入符号在移动时“重置”了它的周期。但在这里，它只是继续以同样的速度闪烁。因此，如果您连续按四次向左箭头，则必须等到插入符号再次出现才能看到您当前的位置（大约持续 0.5 秒）。这有点令人不安。如果有帮助，这是我的代码：

import { useState, useEffect } from "react";
import Prism from "prismjs";

export default function EditCode() {
  const [content, setContent] = useState("");

  const handleKeyDown = (e) => {
    let value = content,
      selStartPos = e.currentTarget.selectionStart;

    if (e.key === "Tab") {
      value =
        value.substring(0, selStartPos) +
        " " +
        value.substring(selStartPos, value.length);
      e.currentTarget.selectionStart = selStartPos + 3;
      e.currentTarget.selectionEnd = selStartPos + 4;
      e.preventDefault();

      setContent(value);
    }
  };

  useEffect(() => {
    Prism.highlightAll();
  }, []);

  useEffect(() => {
    Prism.highlightAll();
  }, [content]);
  return (
    <section className="codeGlobalContainer">
      <textarea
        className="codeInput"
        spellCheck="false"
        wrap="off"
        cols="200"
        value={content}
        onChange={(e) => setContent(e.target.value)}
        onKeyDown={(e) => handleKeyDown(e)}
      />
      <pre className="codeOutput">
        <code className={`language-javascript`}>{content}</code>
      </pre>
    </section>
  );
}

我知道没有像 caret-blinking-speed 这样的 CSS 属性，但有什么我能做的吗？handleKeyDown() 函数是我问题的根源吗？

注意：如果我在我的文本区域中选择文本，使用键盘，一切都会顺利进行。同样，如果我用键盘箭头移动光标并立即键入文本，也没有问题。这实际上只是插入符号的显示。

编辑：如果我删除了预块，问题就解决了，插入符号返回到其基本的“移动时重置闪烁周期”状态。

4

1 回答 1

1

经过几次测试，我发现这是spellCheck="false"我的 textarea 中的行造成了我的问题。所以它现在解决了......但我不知道为什么。

于 2021-11-24T11:31:06.923 回答