在 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)}} />