在 React 中制作可选的可编辑文本字段的最佳做法是什么？

Question

所以我正在尝试进行类似于 VSCode 中的文件浏览器的交互。 我显示一个项目列表，然后点击一个项目到 select 它。 然后我希望能够在选择一个项目时按回车键使该项目可编辑。

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

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

但是当我使用这种方法时，我收到了这个警告：

[错误] 警告：一个组件是contentEditable并且包含由 React 管理的children组件。 现在您有责任保证这些节点都不会被意外修改或复制。 这可能不是故意的。

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

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

所以我的问题是，在我想在仅显示元素和输入元素之间交换的情况下，实现类似目标的标准/最佳实践是什么？ 我应该改用输入标签并禁用它而不是启用它吗？

Answer 1

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

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

Answer 2

contenteditable会给你 HTML，但你没有使用this.state.text作为 HTML（只是文本），正如你所注意到的 HTML 因浏览器而异。 我会为div交换样式input ：

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