禁止回填账号密码

110 阅读1分钟

今天在处理之前的bug的时候,发现一个问题

image.png

查询了好多方法 不是处理readOnly,或者设置autoComplete="new-password"等等.但这些方式都没有解决.

二种处理方式

处理方式一

const [my_readonly, setMy_readonly] = useState(true);
<Input.Password
    placeholder="请输入密码"
    readOnly={my_readonly}
    type="password"
    onFocus={() => {
      setTimeout(() => {
        setMy_readonly(false);
      }, 100);
    }}
    onBlur={() => {
      setTimeout(() => {
        setMy_readonly(true);
      }, 100);
    }}
/>

根据需求 还可以加入这个
type={my_readonly ? 'password' : 'text'}
但这种方式,在多次点击还是会出现回显框

处理方式二

import { Input } from 'antd';  
  
function PasswordInput({ password, onChange }) {  
  const handleChange = (event) => {  
    const password = event.target.value.replace(/./g, '*'); // 将输入内容替换为*  
    onChange(password); // 将新的密码传递给父组件  
  };  
  
  return (  
    <Input.Password
      type="text"
      value={password}  
      onChange={handleChange}  
      placeholder="请输入密码"  
    />  
  );  
}

注意: 针对需求的不同,结合二种处理方式 (因为二种处理方式都有小瑕疵)