React 禁用浏览器自动填充-密码篇

看了司徒正美的https://www.cnblogs.com/rubylouvre/p/5109300.html文章，

尝试没有生效，即便用autoComplete='off'也不能生效

原因是因为React 不推荐直接对Dom进行操作，设置display:none的会被解析成DOM树，但是render Tree则不会包含此节点，而visibility：hidden 会影响布局，则不可能使用他来解决；关于页面呈现流程详细可以看https://juejin.cn/post/6844903859719143437

我遇到的现象是：

1.联动位置不对，浏览器好像会自动匹配前一个Input

2.新建用户信息的时候，并不希望自动填充

出现问题的代码：

<FormItem
          {...formItemLayout}
          label={localeText('SYSTEM_USER_MANAGEMENT.LABEL_SYSTEM_USER_PHONE')}
        >
          <Input.Group compact>
            <FormItem
              style={{width: '45%'}}
              className={`${prefixCls}_country_code`}
            >
              {getFieldDecorator('countryCode', {
                initialValue: (currentCountry && currentCountry.key) || undefined,
                validateTrigger: ['onChange', 'onBlur'],
                rules: [
                  {required: !!phone, message: localeText('SYSTEM_USER_MANAGEMENT.FORMMSG_SELECT_COUNTRY_CODE')}
                ]
              })(
                <EcpSelect
                  style={{width: '100%'}}
                  allowClear
                  model={{idField: 'key', showField: 'key'}}
                  placeholder={localeText('SYSTEM_USER_MANAGEMENT.FORMMSG_SELECT_COUNTRY_CODE')}
                  onFetchData={(): any[] => countryCodes}
                />
              )}
            </FormItem>
            <FormItem
              style={{width: '54%'}}
              className={`${prefixCls}_phone`}
            >
              {getFieldDecorator('phone', {
                validateTrigger: ['onChange', 'onBlur'],
                rules: [
                  {required: false, message: localeText('SYSTEM_USER_MANAGEMENT.FORMMSG_SYSTEM_USER_PHONE_EMPTY')},
                  {
                    pattern: /^[0-9]{1,11}$/,
                    message: localeText('SYSTEM_USER_MANAGEMENT.FORMMSG_PHONE_VALIDATE')
                  }
                ]
              })(
                <Input
                  style={{width: '100%'}}
                  name='user-phone'
                  disabled={type === 'update' || !getFieldValue('countryCode')}
                  type='text'
                  placeholder={localeText('SYSTEM_USER_MANAGEMENT.HINT_SYSTEM_USER_PHONE')}
                />
              )}
            </FormItem>
          </Input.Group>
        </FormItem>
   <FormItem
          {...formItemLayout}
          label={localeText('LOGIN.LABEL_CIPHER')}
        >
          {getFieldDecorator('encryptedPwd', {
            validateTrigger: ['onChange', 'onBlur'],
            rules: [
              {required: true, message: localeText('SYSTEM_USER_MANAGEMENT.FORMMSG_CIPHER_EMPTY')},
              {validator: (rule, value, callback): void => {
                const regExpLimitedChar = /^[A-Za-z0-9@#!%*&()[\]{}|_=-]{8,}$/g;
                const regExpAtLeastOne = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#!%*&()[\]{}|_=-])/;
                if (value && (!regExpAtLeastOne.test(value) || !regExpLimitedChar.test(value))) {
                  callback(localeText('COMMON.FORMMSG_CIPHER_VALIDATE'));
                } else {
                  callback();
                }
              }
              },
              {max: 32, message: localeText('SYSTEM_USER_MANAGEMENT.FORMMSG_CIPHER_LENGTH')}
            ]
          })(
            <Input
              type='password'
              name='encryptedPwd'
              autoComplete='new-password'
            />
          )}
        </FormItem>

解决方案：

在以上代码两个form中间加上下面这句话：

<Input type='text' style={{position: 'absolute', top: '-999px'}} />