add onDataChange

dashboard/src/components/template/SentEdit/SentCell.tsx

@@ -8,33 +8,42 @@ import SentCellEditable from "./SentCellEditable";
 import MdView from "../MdView";
 
 interface ISentCell {
-	data: ISentence;
+  data: ISentence;
 }
 const Widget = ({ data }: ISentCell) => {
-	const [isEditMode, setIsEditMode] = useState(false);
-	return (
-		<SentEditMenu
-			onModeChange={(mode: string) => {
-				if (mode === "edit") {
-					setIsEditMode(true);
-				}
-			}}
-		>
-			<div style={{ display: isEditMode ? "none" : "block" }}>
-				<MdView html={data.html} />
-			</div>
-			<div style={{ display: isEditMode ? "block" : "none" }}>
-				<SentCellEditable data={data} />
-			</div>
-			<div>
-				<Space>
-					<User {...data.editor} />
-					<span>updated</span>
-					<TimeShow time={data.updateAt} title="UpdatedAt" />
-				</Space>
-			</div>
-		</SentEditMenu>
-	);
+  const [isEditMode, setIsEditMode] = useState(false);
+  const [sentData, setSentData] = useState<ISentence>(data);
+  return (
+    <SentEditMenu
+      onModeChange={(mode: string) => {
+        if (mode === "edit") {
+          setIsEditMode(true);
+        }
+      }}
+    >
+      <div style={{ display: isEditMode ? "none" : "block" }}>
+        <MdView html={sentData.html !== "" ? sentData.html : "请输入"} />
+      </div>
+      <div style={{ display: isEditMode ? "block" : "none" }}>
+        <SentCellEditable
+          data={sentData}
+          onClose={() => {
+            setIsEditMode(false);
+          }}
+          onDataChange={(data: ISentence) => {
+            setSentData(data);
+          }}
+        />
+      </div>
+      <div>
+        <Space>
+          <User {...sentData.editor} />
+          <span>updated</span>
+          <TimeShow time={sentData.updateAt} title="UpdatedAt" />
+        </Space>
+      </div>
+    </SentEditMenu>
+  );
 };
 
 export default Widget;