reactjs - 如何在 React 中单击鼠标的位置动态添加 div？

Question

我是 React 新手，想知道如何编写奇怪的代码。我有一个 div 组件，我需要根据我点击 div 的位置添加子 div。我可以在 vanilla JS 中轻松做到这一点 - 这是我想要做的 JS 代码沙箱:https://codepen.io/Webasics/pen/YXXyEO

这是我到目前为止的 react (这是在我的 App 组件中):

const imgAdder = (e) => {
  console.log(e.pageX, e.pageY)
}

<main onClick={imgAdder} </main>

$(document).ready(function() {
  $(this).click(function(e) {
    var x = e.pageX;
    var y = e.pageY;
    $('<div/>').css({
      'top': y,
      'left': x
    }).appendTo('body');
  });
});

div {
  background-color: red;
  width: 50px;
  height: 50px;
  position: absolute;
  transform: translate(-50%, -50%);
  /* optional */
  border: 1px solid black;
  /* optional */
}

h2 {
  z-index: 10;
  /* optional */
  /* This always keeps the title on top*/
  position: absolute;
}

body {
  background-color: #E1E7E8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Click anywhere</h2>

任何方向都会很可爱!谢谢。

Answer 1

function App() {
  // declare array of boxes
  const [boxes, setBoxes] = useState([]);

  const handleClick = ({ pageX, pageY }) => {
    // on every click push a new coordinate to the boxes array
    setBoxes((boxes) => [...boxes, { x: pageX, y: pageY }]);
  };

  return (
    <div className="app" onClick={handleClick}>
      // display boxes
      {boxes.map((box) => (
        // map coordinates to left and top
        <div className="box" style={{ left: box.x, top: box.y }}></div>
      ))}
    </div>
  );
}

样式，大部分是从codepen复制过来的

.app {
  width: 100%;
  height: 100vh;
}

.box {
  position: absolute;
  width: 50px;
  height: 50px;
  background: red;
  transform: translate(-50%, -50%);
}

sandbox