通过React中的contentEditable进行更改后，从div获取innerHTML

Question

感谢您花时间研究此问题。

我正在努力找出如何使这项工作特别是在反应方面。

我使用contentEditable使div元素可编辑，然后使用Refs使div引用其innerHTML。但这些信息似乎并没有进入身体状态。

最终目的是将其保存在数据库中，然后加载以替换div

代码：

import React, {useState, useRef} from "react";
import "./styles.css";
export default function App() {
let  myRef= useRef()
const [body, setBody] = useState("");
let click = () => {
setBody(myRef.innerHTML)
}

return (
<div className="App">
<h1 ref={myRef}>Hello CodeSandbox</h1>
<div></div>
<h1 contentEditable={true}> rewrite me!</h1>
<button onClick={click}> CLICK!</button>
<h1>{body}</h1>
</div>
);
}

沙箱

https://codesandbox.io/s/wispy-glitter-nfym4?file=/src/App.js

Answer 1

使用myRef.current.innerHTML访问innerHTML。

从文档

当ref被传递到渲染中的元素时，对该节点的引用在ref的current属性处变得可访问。

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>    
<script type="text/babel">
function App() {
let myRef = React.useRef();
const [body, setBody] = React.useState("");
let click = () => {
setBody(myRef.current.innerHTML);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div></div>
{/* I think you misassigned your `myRef`, shouldn't it be on this h1? */}
{/* suppressContentEditableWarning=true, to suppress warning */}
<h1 ref={myRef} contentEditable={true} suppressContentEditableWarning={true}> rewrite me!</h1>
<button onClick={click}> CLICK!</button>
<h1>{body}</h1>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
</script>