ReactJS-如何在ReactJS类组件中自动对具有可满足属性为true的元素自动对焦？

Question

我在正在从事的项目中发现了这个P标签。这是我前端的输入字段。我并不是那么熟悉的p tag是一个输入字段，但是当我的组件加载时，我只是要在此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>

我尝试仅将 autocous 作为p标签添加，但什么也没有发生。我想这仅在实际HTML输入字段中起作用。

Answer 1

您将需要使用 refs （ useref useref hook ）＆amp;然后只需 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>
  );
}

完整的示例 on codesandbox

Answer 2

请参阅评论以获取说明，请询问您是否有任何疑问。

另请注意，与 p 标签相比 span div 标签可能会有更多运气>。行为可能会因浏览器而异。

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">
  {/* Check out tabIndex below */}
    <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之前焦点，依此类推）。

有关更多信息，您可以检查