今天在处理之前的bug的时候,发现一个问题
查询了好多方法 不是处理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="请输入密码"
/>
);
}
注意: 针对需求的不同,结合二种处理方式 (因为二种处理方式都有小瑕疵)