看了司徒正美的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'}} />