html - ReactJS - 如何在 ReactJs 类组件中自动聚焦具有 contentEditable 属性 true 的元素？

Question

我在我正在处理的项目中发现了这个 p 标签。这用作我前端的输入字段。我不是很熟悉 p 标签是一个输入字段，但我只是想在我的组件加载时自动在此 p 标签输入字段中设置文本焦点，这样用户就可以随时输入并知道在哪里输入。

      <div className="create-post">
        <p
          contentEditable={!this.props.isLoading}
          spellCheck="true"
          placeholder="Write a new post here"
          id="txtContent"
          onKeyUp={this.entSub}
          onDrop={this.dropDrag}
        ></p>
      </div>

我尝试将 autoFocus 作为 prop 添加到 P 标签，但没有任何反应。我猜这只适用于真正的 HTML 输入字段。

Answer 1

您将需要使用 refs ( useRef hook )，然后只需使用 inputRef.current.focus();。

棘手的部分是如何将插入符移到末尾？

const textLength = inputRef.current.innerText.length;
const range = document.createRange();
const sel = window.getSelection();

range.setStart(inputRef.current.childNodes[0], textLength)
range.collapse(true)

sel.removeAllRanges()
sel.addRange(range)

完整代码

import React, { useRef, useEffect } from "react";
import "./styles.css";

export default function App() {
  const inputRef = useRef(null);
  useEffect(() => {
    inputRef.current.focus();
    // move caret to end
    const textLength = inputRef.current.innerText.length;
    const range = document.createRange();
    const sel = window.getSelection();

    range.setStart(inputRef.current.childNodes[0], textLength)
    range.collapse(true)
    
    sel.removeAllRanges()
    sel.addRange(range)

  }, [inputRef]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div className="create-post">
        <p
          contentEditable
          spellCheck="true"
          placeholder="Write a new post here"
          id="txtContent"
          ref={inputRef}
        >
          Content Editable
        </p>
      </div>
    </div>
  );
}

完整示例 Codesandbox