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

添加为 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

Answer 2

解释见评论，有问题请追问。

另请注意，当涉及

span

时，使用

div

或

p

标签可能比使用

contentEditable

标签更幸运。不同浏览器的行为可能有所不同。

export class App extends React.Component {
  constructor(props) {
    super(props);
    this.editableRef = React.createRef(); // Create a ref
  }

  componentDidMount() {
    this.editableRef.current.focus(); // Runs only on mount to focus the element
  }

  render() {
    return (
      <div className="create-post">
        <p
          ref={this.editableRef} // Assign ref to your element
          contentEditable={!this.props.isLoading}
          spellCheck="true"
          placeholder="Write a new post here"
          id="txtContent"
          onKeyUp={this.entSub}
          onDrop={this.dropDrag}
        />
      </div>
    );
  }
}

Answer 3

要使元素可聚焦，您只需使用 html 标签

tabindex

（在 React 中，

tabIndex

）：

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

tabindex

接受整数值。值 0 表示该元素在任何正值之后都应该是可聚焦的。如果为负数（确切值并不重要），则意味着无法通过顺序键盘访问该元素。当为正数时，意味着该元素应该根据数字值定义的顺序可聚焦（3 在 4 之前可聚焦，依此类推。）。

更多内容可以查看官方文档