微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在 React 的输入之外单击时删除 Readonly

如何解决在 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 举报,一经查实,本站将立刻删除。