如何更改克隆表中的数据？

Question

我有一个表格，用户可以在表格中添加一些文本，我已经使用 useRef 克隆了一个表格。

现场演示：live deom

预期：

我希望用户在表格中输入新文本

这是我尝试过的

import React, { useState, useEffect, useRef } from "react";

export default function App() {
  const tableRef = useRef(null);
  const clonedTableRef = useRef(null);
  const [disclaimer, setDisclaimer] = useState();
  const [signoff, setSignOff] = useState();

  useEffect(() => {
    handleCopyTable();
  }, [disclaimer, signoff]);

  const handleCopyTable = () => {
    clonedTableRef.current.innerHTML = tableRef.current.innerHTML;
  };

  if (disclaimer) {
    console.log("ggggg", disclaimer);
    clonedTableRef.current.querySelector("#disclaimer").innerText =
      "Predifined Text for disclaimer";
  }

  if (signoff) {
    console.log("ggggg", signoff);
    clonedTableRef.current.querySelector("#signoff").innerText =
      "Predifined Text for signoff";
  }

  return (
    <div className="App">
      <div className="disclaimer-box">
        <textarea
          placeholder="Type your characters here"
          onChange={(e) => setDisclaimer(e.target.value)}
          rows="3"
          cols="30"
        ></textarea>
        <button>Add Disclaimer</button>
      </div>
      <div className="signoff-box">
        <textarea
          placeholder="Type your characters here"
          onChange={(e) => setSignOff(e.target.value)}
          rows="3"
          cols="30"
        ></textarea>
        <button>Add signoff</button>
      </div>

      <h1>Original table </h1>
      <div ref={tableRef} className="table">
        <table width="500" cellPadding="0" cellSpacing="0" border="0">
          <thead>
            <tr>
              <th>#</th>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Username</th>
            </tr>
          </thead>
          <tbody>
            <tr
              style={{
                fontSize: "8px",
                fontFamily: "Verdana",
                color: "#fff",
                lineHeight: "10px",
                paddingTop: "10px",
                backgroundColor: "red"
              }}
            >
              <td>1</td>
              <td>Mark</td>
              <td>Otto</td>
              <td>@mdo</td>
              <td>Mark</td>
              <td>Otto</td>
            </tr>
            <tr style={{ margin: "20px" }}>
              <td id="disclaimer" style={{ padding: "20px" }}>
                Disclaimer : {disclaimer}{" "}
              </td>
              <td id="signoff" style={{ padding: "20px" }}>
                signoff : {signoff}{" "}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <h1>Cloned Table</h1>
      <div ref={clonedTableRef} className="table"></div>
    </div>
  );
}

问题：当用户在表格中输入新文本时，克隆的表格会显示新文本而不是预定义文本，有什么建议可以说明这里有什么问题吗？

Answer 1

试试这个

 const [disclaimer, setDisclaimer] = useState(
    "Predifined Text for disclaimer"
  );
  const [signoff, setSignOff] = useState("Predifined Text for signoff");

  useEffect(() => {
    handleCopyTable();
  }, []);

  const handleCopyTable = () => {
    clonedTableRef.current.innerHTML = tableRef.current.innerHTML;
  };

删除

  if (disclaimer) {
    console.log("ggggg", disclaimer);
    clonedTableRef.current.querySelector("#disclaimer").innerText =
      "Predifined Text for disclaimer";
  }

  if (signoff) {
    console.log("ggggg", signoff);
    clonedTableRef.current.querySelector("#signoff").innerText =
      "Predifined Text for signoff";
  }

空的依赖数组只会在挂载时复制 HTML 一次

代码沙箱 => https://codesandbox.io/s/zen-benji-z3rqt?file=/src/App.js:283-652