antd pro ProForm 去除自动填充不生效

chrome对表单会自动填充，特别对 username、password、email。相信chrome初衷是好的，但对开发制造了不少麻烦。

今天写一个新增用户的表单，有两个属性对chrome很敏感，它们是用户名（username）、密码（passward），很顺利在chrome上它表现了自己的独特性：这两个字段自动填充。下面一起看看问题及解决方案。

问题

使用 ProFormFields中ProFormText 和 ProFormText.Password实现表单

代码

<ModalForm
                  title="新建"
                  ...
                >
                  <ProFormText
                    width="md"
                    name="user"
                    label="账号"
                    placeholder="请输入账号"
                    rules={[
                      {
                        required: true,
                        message: '请输入账号',
                      },
                    ]}
                  />
                  <ProFormText.Password
                    width="md"
                    label="密码"
                    name="password"
                    rules={[
                      {
                        required: true,
                        message: '请输入密码',
                      },
                    ]}
                    placeholder="请输入密码"
                  />
                </ModalForm>

现象

 

可以看到页面渲染结束后，回显了该站点下的某个用户名和密码。

解决方案

原因就不赘述了，解决方案就是给 ProFormText 组件增加autoComplete属性，并给其设置合适的值。阻止自动填充有两种值：off 和 new-password 两种选择，off 使用在旧版浏览器上，new-password 使用在新版浏览器上。

<ProFormText
                    width="md"
                    name="user"
                    label="账号"
                    placeholder="请输入账号"
                    fieldProps={{
                      autoComplete: 'off',
                    }}
                    rules={[
                      {
                        required: true,
                        message: '请输入账号',
                      },
                    ]}
                  />
                  <ProFormText.Password
                    width="md"
                    label="密码"
                    name="password"
                    fieldProps={{
                      autoComplete: 'new-password',
                    }}
                    rules={[
                      {
                        required: true,
                        message: '请输入密码',
                      },
                    ]}
                    placeholder="请输入密码"
                  />