通过按钮将表单从 onRead 更改为 Edit答案

【问题标题】：Change form from onRead to Edit through button通过按钮将表单从 onRead 更改为 Edit
【发布时间】：2021-01-31 06:23:00
【问题描述】：

这是用户个人资料设置页面：Box

我想做的是启用输入字段并在按下“保存”按钮后禁用它们。在此操作后，“编辑”按钮变为启用并按下它，输入字段也将返回启用。

1)个人资料页面 --> 表单readOnly=disabled 和“编辑”button=disabled --> 填写表单 --> 保存 --> 表单readOnly=enabled和“编辑”button=enabled。

当用户保存他的信息时：

2)表格readOnly=enabled和“编辑”button=enabled -->点击“编辑”按钮--->表格readOnly=disabled和“保存”button=enabled -->填写表格...

我在 reactjs.org 上重新阅读了整个指南，但我无法从理论开始解决问题。没有实际的例子，我无法学习，也没有通过谷歌搜索找到任何例子。

【问题讨论】：

【解决方案1】：

我已在代码沙箱中复制了您想要的功能，并添加了 cmets 以帮助您了解正在发生的事情。

如果您有任何问题，请告诉我。

【讨论】：

它有效，但只有一个问题：之后我点击“保存”机器人“编辑”和“保存”按钮被启用。如果这不是一个太长的过程，如果您能向我解释如何使用单个按钮并根据状态显示“保存”或“编辑”，我将不胜感激。
所以您希望在启用编辑按钮时禁用保存按钮？
不，只有 1 个按钮。它开始“保存”，当您单击它时，它会变为“编辑”。按钮是一样的，基本上我希望您已经编写的功能可以在一个根据状态而变化的按钮上实现。
我已经用额外的 cmets 更新了沙盒。让我知道这是否适合您。

【解决方案2】：

如何拥有只读与编辑状态：你只需要有状态来确定你是否正在编辑，比如isEditing - 然后根据它设置禁用的字段。（或者将字段换成纯文本显示或其他）

编辑按钮将设置isEditing = true，保存按钮将其设置回false。

【讨论】：