在React中,可以使用useState
钩子来保存Div的内容到状态中。下面是一个示例代码:
import React, { useState } from "react";
function Example() {
const [divContent, setDivContent] = useState("");
const handleDivContentChange = (e) => {
setDivContent(e.target.innerHTML);
};
return (
{divContent}
保存的内容:{divContent}
);
}
export default Example;
在上面的代码中,我们使用useState
钩子来创建一个名为divContent
的状态变量,并通过setDivContent
方法来更新该状态。
在handleDivContentChange
函数中,我们通过e.target.innerHTML
获取到Div的内容,并将其更新到divContent
状态中。
然后,我们将Div设置为可编辑(contentEditable={true}
),并在onInput
事件中调用handleDivContentChange
函数来监听Div内容的变化。
最后,我们在页面上显示保存的内容,并随着Div内容的变化进行更新。
这样,当Div的内容发生改变时,divContent
状态也会随之更新,从而实现了保存Div的内容到状态中的功能。