element.focus() 不适用于重新渲染的 contentEditable div 元素

Question

import React, { useEffect, useState } from "react";

import "./styles.css";

const RichText = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    const div = document.getElementById("textarea");

    if (div) {
      setTimeout(() => {
        div.focus();
      }, 0);
    }
  });

  return (
    <div
      className="rich-text"
      onInput={(e) => {
        setValue(e.target.innerText);
      }}
      contentEditable
      id="textarea"
      dangerouslySetInnerHTML={{
        __html: value
      }}
    />
  );
};

export default RichText;

我想实现富文本组件，想法是你可以在某个字段内输入文本，你可以设置文本的样式（使其变为粗体、斜体、下划线等）。我想在 value 状态变量上使用相同的文本值，然后以某种方式将其包装在 html 标签 <p>Hello <b> Andrew</b></p> 内，并在同一个字段中实时显示，样式化。为了在 div ， contentEditable 字段内显示 html 标签，我需要使用 dangerouslySetInnerHTML ，这是主要问题。每次按下按钮时，我都会更新值，然后重新渲染组件，焦点位于字段的开头，但我希望它在您输入新文本时结束。我试图通过ref => ref.current.focus() 来实现它，它不起作用，在上面的代码中你可以看到我也尝试通过 vanilla js 使用 timeout 来实现它，它也不起作用， autoFocus - 只能在 input, textarea, etc 上使用，div 可以与此属性一起使用。我已将其保存到 ref ，但是我无法在 div 内显示包装好的 html。尝试了很多案例，但似乎都是。有什么制作方法吗？

Answer 1

问题是当使用 useState 钩子与 contentEditable 和 dangerouslySetInnerHTML 同步值时。当您在 div 中键入内容时，它会再次重新呈现并将光标带回到开头。

您可以使用函数组件中的实例变量（useRef 更新值）来解决此问题。

你应该使用innerHTML而不是innerText来保存HTML字符串

像下面这样试试

import React, { useRef } from "react";

import "./styles.css";

const RichText = () => {
  const editableRef = useRef(null);
  const { current: value } = useRef(
    '<div style="color:green">my initial content</div>'
  );

  const setValue = (e) => {
    value.current = e.target.innerHTML;
  };

  const keepFocus = () => {
    const { current } = editableRef;
    if (current) {
      current.focus();
    }
  };

  return (
    <div
      className="rich-text"
      onInput={setValue}
      contentEditable
      id="textarea"
      ref={editableRef}
      onBlur={keepFocus}
      dangerouslySetInnerHTML={{
        __html: value
      }}
    />
  );
};

export default RichText;

Code Sandbox

Answer 2

import React from "react";

import "./styles.css";

class TextInput extends React.Component {
  constructor(props) {
    super();
    this.state = { value: "" };
  }

  shouldComponentUpdate() {
    return true;
  }

  componentDidUpdate() {
    const el = document.getElementById("textarea");

    if (el) {
      console.log(el.selectionStart, el.selectionEnd);

      var range, selection;
      if (document.createRange) {
        //Firefox, Chrome, Opera, Safari, IE 9+
        range = document.createRange(); //Create a range (a range is a like the selection but invisible)
        range.selectNodeContents(el); //Select the entire contents of the element with the range
        range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
        selection = window.getSelection(); //get the selection object (allows you to change selection)
        selection.removeAllRanges(); //remove any selections already made
        selection.addRange(range); //make the range you have just created the visible selection
      } else if (document.selection) {
        //IE 8 and lower
        range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible)
        range.moveToElementText(el); //Select the entire contents of the element with the range
        range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
        range.select(); //Select the range (make it the visible selection
      }
    }
  }

  update(value) {
    this.setState({ value });
  }

  render() {
    console.log(this.state.value);
    return (
      <div
        className="rich-text"
        onInput={(e) => {
          this.update(e.target.innerText);
        }}
        contentEditable
        id="textarea"
        dangerouslySetInnerHTML={{
          __html: `<b>${this.state.value}</b>`
        }}
      />
    );
  }
}

export default TextInput;