警告：您在没有“onChange”处理程序的情况下为表单字段提供了“value”道具 [关闭]

如何修复警告：您在value没有处理程序的情况下为表单字段提供了道具onChange。这将呈现一个只读字段。如果该字段应该是可变的，请使用defaultValue. 否则，设置其中一个onChange或 `readOnly ?

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

const quickAndDirtyStyle = {
  width: "200px",
  height: "200px",
  background: "#FF9900",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  alignItems: "center"
};

const Container = {
  fontFamily: "sans-serif",
  textAlign: "center",
};

const inputC = {
  width: "100px",
  height: "30px",
  fontSize: "4vw",
  position: "relative",
  top: "0",
  left: "0",
  display: "flex",
  cursor: "pointer"
};

const h1 = {
  display: "block",
  margin: "0",
  padding: "0",
  marginLeft: "20px",
  paddingRight: "10px"
};

export default function App() {

  const [pressed, setPressed] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const ref = useRef();

  // Monitor changes to position state and update DOM
  useEffect(() => {
    if (ref.current) {
      ref.current.style.marginLeft = `${position.x}px`;
      ref.current.style.marginTop = `${position.y}px`;
    }
  }, [position]);

  // Update the current position if mouse is down
  const onMouseMove = (event) => {
    if (pressed) {
      setPosition({
        x: position.x + event.movementX,
        y: position.y + event.movementY
      });
    }
  };

  return (
    <div className="App" style={Container}>
      <div style={{ display: "flex" }}>
        <h1 style={h1}>X</h1>
        <input className="inputC" style={inputC}  type="number" value={position.x} />
        <h1 style={h1}>Y</h1> 
        <input className="inputC" style={inputC}  type="number" value={position.y} />
      </div>
      <div
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)"
        }}
      >
        <div
          ref={ref}
          style={quickAndDirtyStyle}
          onMouseMove={onMouseMove}
          onMouseDown={() => setPressed(true)}
          onMouseUp={() => setPressed(false)}
          onMouseLeave={() => setPressed(false)}
        >
        </div>
      </div>
    </div>
  );
}