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

【问题标题】：Remove Readonly when it is clicked outside of the input in React在 React 的输入之外单击时删除 Readonly
【发布时间】：2021-09-05 21:21:21
【问题描述】：

我正在尝试对我的输入组件进行只读处理。所以基本上，我有一个输入组件，默认情况下，它带有只读的。我想要做的是在输入字段内单击它时，只读变为 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}/>
  );
};

所以我的逻辑很简单，disabled 为 true 表示只读为 true，因此当在内部单击它时，disabled 变为 false 并且可编辑。但我不能做剩下的。所以我不知道如何在外面点击时再次将disabled设为false。

感谢您的帮助。而且我有更多的想法。

【问题讨论】：

标签： reactjs onclick readonly inputbox

【解决方案1】：

您可以使用onBlur 来做到这一点：

<Form.Control onBlur={() => {setDisabled(true)}} />

【讨论】：