react.js 如何自动聚焦 contentEditable 元素

Question

如何在 React 中将焦点设置在 contentEditable 元素上？ 我找到了很多关于这个主题的页面，但无法让它工作。

示例代码：

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

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

    useEffect(inputRef => {
        if (inputRef) {
            inputRef.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;

Answer 1

看起来我的解决方案是这样的。

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

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

    useEffect(() => {
        inputRef.current.focus();
    }, [inputRef]);

    return (
        <div className="about">
            <h2>About</h2>

            <p className="paragraph"
                contentEditable={true}
                suppressContentEditableWarning={true}
                spellCheck={false}
                ref={inputRef}
            >
                Hello
            </p>

        </div >
    )
}

export default About;

Answer 2

找到了另一个可行的解决方案：

const inputRef = useCallback(node => {
    node.focus()
  }, [])

Answer 3

也许你可以用这个：

  <textarea className="paragraph"
             ref={inputRef}
             value={yourValueState}
            autofocus/>

Answer 4

抱歉我迟到了，但这就是我解决此问题的方法：

首先，删除 useRef 和 useEffect 钩子，因为不需要它们。然后，将 onClick 属性添加到 div。该道具应包含一个事件参数，您将使用该参数捕获当前目标并触发焦点功能。

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

const About = () => {

    return (
        <div className="about">
            <h2>About</h2>

            <p className="paragraph"
                contentEditable={true}
                suppressContentEditableWarning={true}
                spellCheck={false}
                onClick={(e)=> e.currentTarget.focus()}
              >
                Hello
            </p>

        </div >
    )
}

export default About;