禁用静态管理简单表单的自动完成功能

Question

是否可以禁用AOR SimpleForm组件的自动完成功能？ 我尝试了以下各种组合：

<SimpleForm autoComplete="off">

但是似乎没有任何效果。 可以通过这种方式自定义它，还是需要创建自己的组件？ 我专门针对AOR（而不是react-admin）需要它。 预先感谢您的帮助。

Answer 1

我认为您可能对如何禁用自动完成功能有基本的了解，所以这里是一个补充：

如何禁用HTML中的自动完成功能？

autocomplete是HTML attribute元素的input。可能的值为on和off。

您可以通过以下方式禁用自动完成功能：

<input type="email" name="email" autocomplete="off">

如何将其应用于React？

  

React始终向DOM提供以JavaScript为中心的API。由于React组件通常同时使用自定义和与DOM相关的道具，因此React就像DOM API一样使用camelCase约定

Source

结论是，您必须在这些组件又称为输入字段上，而不是from元素上，将属性 autoComplete设置为off在输入字段周围。

示例

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <input name="email" autoComplete='off' />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在您的情况下，这些组件可适当地称为TextInput。

After looking at the source，我发现AOR使用material-ui中的TextField，它接受​​autoComplete作为属性。

因此，如果您通过input={{ autoComplete: 'off' }}或options={{ autoComplete: 'off' }}，就应该很好。