Reactjs 如何使用contenteditable元素存储状态更改？

如何使用contenteditable元素存储状态更改

这段代码很好地存储了它，但是光标变为元素的开头

我必须对光标位置进行编码，还是有一个简单的解决方案

不，我不会使用表单元素

import React, { useState } from 'react';

const About = () => {
    const [text, setText] = useState('Hallo');

    return (
        <div className="about">
            <h2>About</h2>
            <div className="title column m-0"
                contentEditable={true}
                suppressContentEditableWarning={true}
                onInput={(e) => { setText(e.target.innerHTML) }}
                onBlur={(e) => { setText(e.target.innerHTML) }}
                dangerouslySetInnerHTML={{ __html: text }}
            ></div>
        </div >
    )
}

export default About;

import React，{useState}来自“React”；
const About=（）=>{
const[text，setText]=useState（'Hallo'）；
返回(
关于
{setText（e.target.innerHTML）}
onBlur={（e）=>{setText（e.target.innerHTML）}
危险的赛汀能html={{{uuuuHTML:text}
>
)
}
导出默认值约为；

如果您只想存储更改，而不想拥有受控组件，则可以使用

onInput

prop。它会将更改的文本存储到您的状态中

 <div
    contentEditable={true}
    suppressContentEditableWarning={true}
    onInput={e => setText(e.currentTarget.textContent)}
 ></div>

setText（e.currentTarget.textContent）}
>

---

注：光标失去焦点的原因是，当您

危险地查看HTML

时，基本上是在重新装入

div

中的所有数据，包括光标位置。这就是不推荐使用这种方式设置HTML的原因之一。

如果您只想存储更改，而不想拥有受控组件，则可以使用

onInput

prop。它会将更改的文本存储到您的状态中

 <div
    contentEditable={true}
    suppressContentEditableWarning={true}
    onInput={e => setText(e.currentTarget.textContent)}
 ></div>

setText（e.currentTarget.textContent）}
>

---

注：光标失去焦点的原因是，当您

危险地查看HTML

时，基本上是在重新装入

div

中的所有数据，包括光标位置。这就是以这种方式设置HTML的原因之一，不推荐。

但是我从一开始的状态就有一个默认值吗？@AlexanderJuhl如果有一个默认值，你可以在

div

中设置你想要的内容，比如：

default value

。但是我从一开始的状态就有一个默认值吗？@AlexanderJuhl如果有一个默认值，你可以设置你想要的内容想要在您的

div

中添加如下内容：

默认值

。