react.js 如何自动对焦 contentEditable 元素答案

【问题标题】：react.js how can I autofocus a contentEditable elementreact.js 如何自动对焦 contentEditable 元素
【发布时间】：2020-09-19 15:05:27
【问题描述】：

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

示例代码：

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;

【问题讨论】：

我猜的问题是，当执行 useEffect 时，输入 ref 可能为空。我的 2 个建议是将 useEffect 更改为 useLayoutEffect 并将焦点更改为 inputRef.current.focus()
更改这两个参数不起作用。也许我应该做一个类组件。

标签： reactjs contenteditable autofocus

【解决方案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;

【讨论】：

【解决方案2】：

也许你可以用这个：

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

【讨论】：

但是我失去了 contentEditable 元素的可能性。