javascript - 使用受控输入 react contentEditable div

标签 javascript html reactjs input contenteditable

有什么方法可以控制输入的 contentEditable div 吗?

我正在寻找这种确切的行为,但我需要使用 contentEditable div 而不是输入:

<input value={this.state.text}></input>

输入不显示键入的内容,而是显示 this.state.text 中的内容。

只是用 contentEditable div 换出是行不通的,它显示的是输入的内容而不是 this.state.text 中的内容:

<div contentEditable={true} value={this.state.text}></div>

堆栈 Blitz :https://stackblitz.com/edit/react-q4xoya

最佳答案

值不是 div 的有效属性。可以做到,但没有官方支持,肯定是非正统的。

我建议您更改堆栈 Blitz 中的这一行:

<div style={{border: '1px solid black'}} contentEditable={true} value={this.state.text}></div>

为此:

<div style={{border: '1px solid black'}} contentEditable={true}>{this.state.text}</div>

关于javascript - 使用受控输入 react contentEditable div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60889784/

相关文章:

javascript - 函数和无状态组件之间的区别?

javascript - 如何使用 Nextjs/React 将 JSON 对象导出到 Excel?

reactjs - 使用文件夹名称解析 Typescript 文件

javascript - 如何向 div 元素添加 onload 事件

python - 抓取使用 javascript 的网站

javascript - 使用 jQuery 的 Ajax 日历导航

javascript - 如何通过POST方法发送json文件并在servlet上接收

javascript - 如何移动包含当前表单字段值的 DOM 部分?

javascript - 为什么我不能从 POST 请求中提取 zip 文件?

javascript - jQuery向上遍历并找到