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

Question

我正在尝试以只读方式处理我的输入组件。所以基本上，我有一个输入组件，默认情况下，它是只读的。我想要做的是在输入字段内单击它时，只读变为错误并且它是可编辑的。但是我又想要read-only true，只有当它被点击到输入框外面的时候。所以这是我的组件：

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。

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

Answer 1

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

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

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

Remove Readonly when it is clicked outside of the input in React

onclick

readonly

inputbox

reactjs