通过 F12 将 react 输入值从 disabled 或 readOnly 更改为 normal答案

【问题标题】：The react input value is changed from disabled or readOnly to normal by F12通过 F12 将 react 输入值从 disabled 或 readOnly 更改为 normal
【发布时间】：2018-05-18 08:09:13
【问题描述】：

页面渲染，输入“readOnly”或“disabled”属性为true。然后我按“F12”，手动删除readOnly或disabled属性。然后，我在文本框中输入。但是不允许。

【问题讨论】：

有问题吗？反应不是为您手动更改html输出而构建的吗？你有什么问题？
如何保证页面属性的改变不会改变输入值，否则用户会保存errordata？

标签： reactjs react-component

【解决方案1】：

您无法阻止这种行为。 HTML/JS 存储在您的客户端上，因此可以通过使用 F12 的 Web 浏览器访问和修改，您无法阻止用户使用这些工具修改您的页面。

仅当您允许用户在您的文本框中输入内容时，您的工作就是保存用户输入的值，请记住，只要这些修改仅触及 HTML 部分，它们就纯粹是视觉上的。

【讨论】：

但是像这样<input type="text" className="form-control" id="prectlid" placeholder="Required" value={data.value || ''} maxLength={100} disabled/>，当手动删除只读或禁用属性时。用户无法编辑。但是如果是这样，$("input[type='text']").attr("disabled", true);，它可以
@jiahangsu 用户可以停止所有 javascript/ 或直接使用邮递员调用您的 api 端点并将任何值发送到用户想要的服务器。所以你必须在 API 级别而不是在 ui 级别来保护它。
@Joel Harkes 你说的也是一个想法。非常感谢。