问题描述
我试图在我的输入组件上处理只读。所以基本上,我有一个输入组件,默认情况下,它带有只读。我想要做的是当它在输入字段内单击时,只读变为 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)}} />