如何使用 contenteditable 元素存储状态变化？

Question

此代码很好地存储了它，但光标更改为元素的开头。

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

不，我不会使用表单元素。

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;

Answer 1

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

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

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

如何使用 contenteditable 元素存储状态变化？

How to store changes in state using contenteditable element?

state

contenteditable

reactjs

react-hooks