Html 自动完成输入在 React 中不起作用

Posted

技术标签:

【中文标题】Html 自动完成输入在 React 中不起作用【英文标题】:Html Autocomplete Input not working in React 【发布时间】:2021-10-23 13:27:00 【问题描述】:

我已经创建了一个表单并且想要自动完成。因此用户可以选择浏览器建议的电子邮件。我曾经将autocomplete='on' 添加到 html 中的输入或表单中,它起作用了。但同样的事情在 React 中不起作用。我正在使用 tailwindcss 不确定它是否与它有关。有什么建议吗?

<form
  autoComplete='on'
>
  <input
    type='email'
    autoComplete='on'
    value=claimerEmail
    onChange=(e) => setClaimerEmail(e.target.value)
    className='block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-700 dark:focus:border-gray-700 sm:text-sm dark:text-gray-200 dark:border-gray-800 dark:bg-brand-secondary'
  />
</form>

【问题讨论】:

【参考方案1】:

我设法通过像这样添加名称 attr 来解决此问题。

<form>
  <input
    type='email'
    name='email'
    value=claimerEmail
    onChange=(e) => setClaimerEmail(e.target.value)
    className='block w-full mt-1 border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500 dark:focus:ring-gray-700 dark:focus:border-gray-700 sm:text-sm dark:text-gray-200 dark:border-gray-800 dark:bg-brand-secondary'
  />
</form>

【讨论】:

以上是关于Html 自动完成输入在 React 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

自动焦点属性在 React Native 的文本输入组件中不起作用

浏览器自动完成/保存的表单在 ajax 请求中不起作用

Emmet 自动完成功能在 JSX 中不起作用

自动完成=关闭在 chrome 中不起作用

jQuery UI 自动完成功能在 iOS 中不起作用

自定义字体在 React Native 中不起作用