我有一个ReactJS应用程序，它是用Material UI构建的。
目标浏览器是Chrome和Microsoft Edge，都是最新版本和两个最新版本(因此总共有3个版本(。
我想要实现的目标：
禁用文本输入字段的自动完成和自动填充功能
我找了很长时间，但找不到一个有效的解决方案。
到目前为止我尝试过的：
- autoComplete＝｛"off"｝
- autoComplete＝｛"false"｝
- autoComplete＝{"xyz"}，因此使用自定义值自动完成
- autoComplete＝"；"新密码">但它在Edge中不起作用
- 一个解决方案的实现，在开始时将HTML只读属性添加到每个输入字段，在焦点上删除它，然后在texfield的Blur上再次添加它。这不起作用，而且还导致了一个缺陷，即通过使用键盘上的制表器移动到另一个文本输入不再可能
对我来说，将每个字段都封装在<form>元素中不是解决方案
很高兴看到解决这个问题的方法。
一种可能的解决方案是为每次渲染<TextField>时设置一个唯一的名称属性。例如：
<TextField
{...textFieldProps}
label={label}
name={`${label}${Date()}`}
/>
你所引用的自动填充和自动完成行为是现代浏览器试图成为"；"聪明"；并记住用户过去的输入以节省时间。你可能在浏览网页时注意到了这种行为；记得"；您从其他网站输入的信息。出现这种情况时，是因为两个元素的name属性值相同。在你的情况下；存储器"；行为是不可取的。
虽然该解决方案有效，但在每个渲染上都会创建一个新的Date对象，这并不理想；然而，之所以使用Date，是因为它确保了直到第二个名称都是唯一的。可能有一些包以更高性能的方式创建了唯一的名称。
您可以在此处阅读有关自动完成的更多详细信息。问题是autoComplete是Material Ui属性，而autoComplete是原生html属性。
可能的解决方案是在您有更多控制权的情况下，使自定义组件不使用Material Ui。这样，我确信，你将设法禁用跨浏览器自动完成。
Microsoft Edge忽略autoComplete道具。有变通办法，但它们很难解决。
因此，Microsoft Edge在标签上执行正则表达式>name将输入与自动完成联系起来。正因为如此，你不能使用"；标准"；标签。
在不知道它匹配的所有模式的情况下，我想说，最简单的解决方案是在它自动填充后清除它。如果你知道模式，你可以避免它，并创建一个自定义的TextField来避免Edge自动完成的情况。
至于最后一点，这是一个更复杂的解决方案，但在逻辑上是可行的。您必须围绕文本输入字段(TextField(创建一个包装器组件。它检查组件何时聚焦，然后删除readOnly道具。