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

【问题标题】：How to store changes in state using contenteditable element?如何使用 contenteditable 元素存储状态更改？
【发布时间】：2020-11-14 14:09:37
【问题描述】：

如何使用 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;

【问题讨论】：

标签： reactjs react-hooks state contenteditable

【解决方案1】：

如果您只想存储更改而不是受控组件，您可以使用onInput prop。它会将更改后的文本存储到您的状态中。

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

P.S：光标失去焦点的原因是当您dangerouslySetInnerHTML 时，您基本上是在重新挂载您在div 中的所有数据，包括光标位置。这也是不推荐以这种方式设置 HTML 的原因之一。

【讨论】：

但是我从一开始就有一个默认值在我的状态？
@AlexanderJuhl 要获得默认值，您可以在 div 中设置您想要的内容，例如：<div .... > Default Value </div>。