在 Formik 字段中禁用 Google Chrome 地址自动完成 - ReactJs答案

【问题标题】：Disable Google Chrome address autocomplete in a Formik Field - ReactJs在 Formik 字段中禁用 Google Chrome 地址自动完成 - ReactJs
【发布时间】：2021-09-08 04:38:59
【问题描述】：

我在 Formik ReactJs 中有一个表单，它接收数据以填写地址。 Field Formik

但是，当某人在谷歌浏览器中添加了地址时，表单会如下所示： Field Formik with autocomplete

如何从我的字段中删除自动完成功能？我尝试过：autocomplete="off"，但它不起作用。

这里是 mi 字段：

          <Field
            component={FormikAutocomplete}
            name="countryArea"
            noOptionsText={i18n._(t`No options`)}
            options={counties.map(c => c.name)}
            disableClearable
            getOptionSelected={(option, value) =>
              option.toLowerCase() === value.toLowerCase()
            }
            textFieldProps={{
              fullWidth: true,
              label: i18n._(t`Province / State / Region`),
              variant,
            }}
            disabled={disabled}
          />

对代码有任何疑问，我很用心解决它以获得更好的帮助。

谢谢。

【问题讨论】：

标签： reactjs autocomplete field formik

【解决方案1】：

在我看来，chrome 依赖于字段的名称来自动完成，你有没有尝试过比“countryArea”更不明显的东西？喜欢：

const Basic = () => {
  return (
    <form>
      <div>
        <span>With autocomplete</span>
        <input type="text" name="countryArea" />
      </div>
      <div>
        <span>Without autocomplete</span>
        <input type="text" name="ctryAr" />
      </div>
      <div>
        <span>With autocomplete</span>
        <input type="text" name="phone" />
      </div>
      <div>
        <span>Without autocomplete</span>
        <input type="text" name="phne" />
      </div>
    </form>
  );
};

ReactDOM.render(<Basic />, document.getElementById("react"));

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<div id="react" />

【讨论】：