首页 > 解决方案 > Html 自动完成输入在 React 中不起作用

问题描述

我创建了一个表单并希望有自动完成功能。因此用户可以选择浏览器建议的电子邮件。我曾经在 Html 中添加autocomplete='on'到输入或表单,并且它起作用了。但同样的事情在 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>

在此处输入图像描述

标签: htmlreactjsformstailwind-css

解决方案


我设法通过像这样添加名称 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>

推荐阅读