我有以下React文件。現(xiàn)在，當(dāng)用戶將鼠標(biāo)懸停在jpg上時(shí)，它會(huì)在jpg右側(cè)的div中放大圖像，這正是我想要的。但是，我還想根據(jù)鼠標(biāo)在圖像中的懸停位置來(lái)跟蹤(x，y)像素坐標(biāo)，并將它們顯示在“coords-container”div中。現(xiàn)在，它只會(huì)放大。為了顯示像素坐標(biāo)，我該如何修改我的代碼呢？任何見(jiàn)解將非常感謝！

Coordinates.js '

import React, { useState } from "react";
import ReactImageMagnify from "react-image-magnify";
import { TextField, Button, Typography } from "@material-ui/core";
import image from './tree.jpg';
import './App.css';

const Grid = () => {
  return (
    <div className="input-grid">
      <div className="input-container">
        <label htmlFor="x1">x1:</label>
        <input type="text" id="x1" />
      </div>
      <div className="input-container">
        <label htmlFor="x2">x2:</label>
        <input type="text" id="x2" />
      </div>
      <div className="input-container">
        <label htmlFor="y1">y1:</label>
        <input type="text" id="y1" />
      </div>
      <div className="input-container">
        <label htmlFor="y2">y2:</label>
        <input type="text" id="y2" />
      </div>
    </div>
  );
};;

const Coordinates = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const [clickPosition, setClickPosition] = useState({ x: null, y: null });
  const [hovering, setHovering] = useState(false);
  const [selectedFile, setSelectedFile] = useState(null);
  const [coordinates, setCoordinates] = useState({ x1: '', x2: '', y1: '', y2: '', manualX1: '', manualX2: '', manualY1: '', manualY2: '' });

  const handleMouseMove = (event) => {
    setMousePosition({ x: event.clientX, y: event.clientY });
    const image = document.getElementById('rocker-img');

    const rect = image.getBoundingClientRect();
    const scaleX = image.naturalWidth / image.width;
     const scaleY = image.naturalHeight / image.height;

    const x = (event.clientX - rect.left) * scaleX;
    const y = (event.clientY - rect.top) * scaleY;

    if (x >= 0 && x < image.naturalWidth && y >= 0 && y < image.naturalHeight) {
      setCoordinates({ x: Math.round(x), y: Math.round(y) });
    } else {
      setCoordinates({ x: '', y: '' });
      }
  };

  const [x1, setX1] = useState("");
  const [x2, setX2] = useState("");
  const [y1, setY1] = useState("");
  const [y2, setY2] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`(${x1},${x2}), (${y1},${y2})`);
  };

  const handleClick = (event) => {
    setClickPosition({ x: mousePosition.x, y: mousePosition.y });
  };

  const handleClearClick = (event) => {
    setClickPosition({ x: null, y: null });
  };

  const handleFileInputChange = (event) => {
    setSelectedFile(event.target.files[0]);
  };

  const handleInputChange = (event) => {
    setCoordinates({ ...coordinates, [event.target.name]: event.target.value });
  };

   return (
    <div className="container">
      <div className="file-upload">
        <label htmlFor="file-input">Upload Image</label>
         <input type="file" id="file-input" onChange={handleFileInputChange} />
      </div>
      <div className="image-container">
        <ReactImageMagnify className="magnifier" {...{
           smallImage: {
           alt: 'Wristwatch by Ted Baker London',
           isFluidWidth: true,
           src: image
          },
 largeImage: {
           src: image,
           width: 1200,
           height: 1800
          }
        }} >
          <img id="rocker-img" src={image} alt="Rocker" />
        </ReactImageMagnify>
      </div>
      <div className="empty-div"></div>
      <div className="coords-container">
        <p className="coords">X: {coordinates.x}</p>
        <p className="coords2">Y: {coordinates.y}</p>
      </div>
      <div className="text-box-container">
        <label htmlFor="coordinates">Coordinates: </label>
        <input type="text" id="coordinates" value={clickPosition.x !== null ? `(${clickPosition.x}, ${clickPosition.y})` : ''} readOnly />
        <button onClick={handleClearClick}>Clear</button>
      <div style={{ display: 'flex', alignItems: 'center' }}>
      <div style={{ marginRight: '10px' }}>
        <TextField label="x1" name="x1" value={coordinates.x1} onChange={handleInputChange} />
        <br />
        <TextField label="x2" name="x2" value={coordinates.x2} onChange={handleInputChange} />
        <br />
        <TextField label="y1" name="y1" value={coordinates.y1} onChange={handleInputChange} />
        <br />
        <TextField label="y2" name="y2" value={coordinates.y2} onChange={handleInputChange} />
      </div>
      <div>
         <TextField label="Manual x1" name="manualX1" value={coordinates.manualX1} onChange={handleInputChange} />
        <br />
        <TextField label="Manual x2" name="manualX2" value={coordinates.manualX2} onChange={handleInputChange} />
        <br />
        <TextField label="Manual y1" name="manualY1" value={coordinates.manualY1} onChange={handleInputChange} />
        <br />
        <TextField label="Manual y2" name="manualY2" value={coordinates.manualY2} onChange={handleInputChange} />
      </div>
    </div>
  </div>
  </div>
  );
};

export default Coordinates;

App.css

.magnifier {
  height: 350px;
  width: 350px;
  margin-top: 20px;
  margin-left: 50px;
  float: left;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 400px;
  width: 500px;
  margin-left: 50px;
}

.empty-div {
  flex-grow: 1;
}

.image-container {
  display: flex;
  position: relative;
}

.coords-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.coords {
  margin: 0;
  padding-left: 20px;
}

.coords2 {
  margin: 0 0 0 20px;
}

.crosshair {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  }

.text-box-container button {
  margin-left: 5px;
};

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  margin-top: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-container label {
  margin-right: 5px;
}

.input-container input {
  margin-left: 5px;
}

.input-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  margin-top: 10px;
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-container label {
  margin-right: 5px;
}

.input-container input {
  margin-left: 5px;
}