如何解决通过React中的contentEditable进行更改后从div获取innerHTML
感谢您抽出宝贵的时间来研究这个问题。
我正在努力寻找如何使这项工作特别地在反应中发挥作用。
我使用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
解决方法
使用innerHTML
访问myRef.current.innerHTML
。
从docs
将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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。