在 react 中制作可选可编辑文本字段的最佳实践是什么？

Question

所以我想做一个类似于VSCode中的文件浏览器的交互。我显示一个项目列表，并单击一个项目来选择它。我希望当一个项目被选中时，我能够按回车键，使该项目可编辑。

我的第一次尝试是使用contentEditable属性，因为它似乎是打开和关闭编辑的简单方法:

...
render(
<div
contentEditable={this.state.isEditable}>
{this.state.text}
</div>
)

但是当我使用这个方法时，我得到了这个警告:

[Error] Warning:组件为contentEditable，且包含由React管理的children。现在，您有责任保证这些节点不会被意外修改或复制。这可能不是有意的。

如果我理解正确的话，contentEditable打破了React的惯例，如果我使用这个方法，这可能会导致问题。

当我阅读了更多关于contentEditable的一般内容时，我也看到了内部生成的HTML在不同浏览器之间不一致的一些问题。

所以我的问题是，实现这样的东西的标准/最佳实践是什么，我想在一个只显示的元素和一个输入元素之间交换?我应该使用输入标签，而不是禁用它，而不是启用它?

Answer 1

您可以考虑使用输入的本机属性,只读的/禁用,取决于你的用例,例如:

<input readOnly={!this.state.isEditable}/>

Answer 2

contenteditable会给你HTML，但你不使用this.state.text作为HTML(只是文本)，正如你已经注意到的，HTML因浏览器而异。我会用input替换div:

return this.state.isEditable
? <input className="styling-class" type="text" value={this.state.text} />
: <div>{this.state.text}</div>
;