小编Ale*_*uhl的帖子

我确实使用react-draft-wysiwyg制作了一个简单的react应用程序，但我收到了警告。

import React from "react";
import ReactDOM from "react-dom";
import { Editor } from "react-draft-wysiwyg";
import "../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

ReactDOM.render(
  <React.StrictMode>
    <Editor />
  </React.StrictMode>,
  document.getElementById("root")
);

当我单击编辑器时，我会在控制台中收到此错误，但仅当我在严格模式下运行它时：

警告：无法对尚未安装的组件调用 setState。这是一个空操作，但它可能表明您的应用程序中存在错误。相反，直接分配this.state或在 r 组件中定义state = {}; 具有所需状态的类属性。

我确实为您制作了一个 codeSandbox： https: //codesandbox.io/s/strange-monad-lxtuu ?file=/src/index.js:0-295 尝试单击编辑器并查看控制台中的警告。我做错了什么？

如何在 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;