正在更改react表单，但输入值不可编辑

import React, { useState } from 'react';

function MyForm() {
  const [inputValue, setInputValue] = useState('initial value');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <form>
      <input type="text" value={inputValue} onChange={handleChange} disabled />
    </form>
  );
}

import React, { useRef } from 'react';

function MyForm() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.readOnly = true;
  };

  return (
    <form>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Make Input Readonly</button>
    </form>
  );
}