如何解决在 React 的输入之外单击时删除 Readonly
我试图在我的输入组件上处理只读。所以基本上,我有一个输入组件,默认情况下,它带有只读。我想要做的是当它在输入字段内单击时,只读变为 false 并且它是可编辑的。但是我再次希望只读为真,只有当它被点击到输入框的外部时。 所以这是我的组件:
const InputComponent = () => {
const [disabled,setdisabled] = useState(true);
function handleClick() {
if(disabled == true) {
setdisabled(false);
}
else {
//Todo: click outside the set readonly
}
}
return (
<Form.Control type="number" readOnly={disabled} onClick={handleClick}/>
);
};
所以我的逻辑很简单,当禁用为真时,这意味着只读为真,所以当它在里面被点击时,禁用变成假并且它是可编辑的。但我不能做其余的。所以我不知道如何在外面点击时再次禁用禁用。
感谢您的帮助。我有更多的想法。
解决方法
您可以使用 onBlur
来做到这一点:
<Form.Control onBlur={() => {setDisabled(true)}} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。