React中如何为contentEditable元素设置焦点？代码问题求助

我一眼就发现你代码里的两个小问题，正是它们导致焦点设置失败，咱们一步步来修正：

问题分析 #

• useEffect回调参数错误：你把inputRef作为了useEffect回调函数的参数，这会直接覆盖外部定义的ref变量，而且这个参数在这里根本不是你需要的ref对象（当依赖数组为空时，这个参数是undefined）。
• 未访问ref的current属性：React的useRef返回的是一个包含current属性的对象，实际的DOM元素存在于inputRef.current中，直接调用inputRef.focus()肯定无效。

修正后的代码 #

import React, { useRef, useEffect } from 'react';

const About = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // 先检查current是否存在，避免DOM未挂载时调用focus报错
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div className="about">
      <h2>About</h2>
      <p 
        className="paragraph" 
        contentEditable={true} 
        suppressContentEditableWarning={true} 
        spellCheck={false} 
        ref={inputRef}
      >
        Hello
      </p>
    </div>
  )
}

export default About;

额外优化提示 #

如果你的contentEditable元素是动态渲染的（比如依赖某个状态变量控制显示），记得把对应的状态变量加入useEffect的依赖数组，这样当元素真正挂载后才能触发焦点设置。另外，如果你想让光标自动定位到文本末尾而不是开头，可以在focus后补充这段代码：

const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(inputRef.current);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);

内容的提问来源于stack exchange，提问作者Alexander Juhl