reactjs - antd 选择关闭自动完成

Question

我正在尝试关闭 ant design Select 上的自动完成功能，但我尝试的任何方法都不起作用。这显然是有问题的，因为 chrome(目前仅测试了一个)自动完成功能完全覆盖了选择选项(下图)。

我在 React 中使用 antd，并在 Select 标签和 Form 标签上尝试了以下操作:

autoComplete="关闭"autoComplete="不"autoComplete="business-state"

他们似乎都没有将其关闭。

这里是一个代码沙箱的链接，其中包含几乎相同的代码，但问题是它不会重现相同的问题。由于某种原因，沙箱上完全相同的代码不会显示自动完成功能。我添加了一个电子邮件输入来显示测试自动完成功能是否有效，并且确实有效。我不明白为什么它在沙盒中的工作方式与在我的服务器中的工作方式不同。

https://codesandbox.io/s/wovnzpl9xw

这是用户键入搜索选项时的样子

它应该是这样的(它只在焦点上看起来像这样，但一旦用户输入，chrome就会显示自动完成)

Answer 1

找到了我的问题的解决方案，感谢@trkaplan为我指明了正确的方向。我猜这不是最优雅的解决方案，所以如果其他人有更好的方法来实现这一点，我会洗耳恭听。我本质上必须为 Select 创建一个 onFocus 方法，该方法通过类 ant-select-search__field 循环获取所有元素并利用它们setAttribute 将 autocomplete 属性更改为任意值以禁用它。

onFocus={() => {
  if (!this.state.autocompleteDisabled) {
    let i;
    const el = document.getElementsByClassName(
      "ant-select-search__field"
    );
    for (i = 0; i < el.length; i++) {
      el[i].setAttribute(
        "autocomplete",
        "registration-select"
      );
    }
    this.setState({ autocompleteDisabled: true });
  }
}}