在React中的输入之外单击Readonly时将其移除

import React, { useState, useEffect, useRef } from 'react';

function App() {
  const [isReadonly, setIsReadonly] = useState(true);
  const inputRef = useRef(null);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (inputRef.current && !inputRef.current.contains(event.target)) {
        setIsReadonly(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        value="Click outside me!"
        readOnly={isReadonly}
      />
    </div>
  );
}

export default App;