时间戳

首页 > 解决方案 > 通过 React 中的 contentEditable 更改后从 div 获取 innerHTML

reactjs - 通过 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

标签： reactjsinnerhtmlcontenteditablerefs

解决方案

访问innerHTML使用myRef.current.innerHTML.

从文档

当 ref 被传递给 render 中的元素时，对节点的引用可以在currentref 的属性中访问。

<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>

推荐阅读