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

【问题标题】：How do I dynamically add a div where mouse was clicked in React?如何在 React 中单击鼠标的位置动态添加 div？
【发布时间】：2022-11-23 07:23:55
【问题描述】：

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

到目前为止，这是我的反应（在我的 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>

任何方向都会很可爱！谢谢你。

【问题讨论】：

标签： reactjs dynamic appendchild

【解决方案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

【讨论】：

哇，这很短很容易谢谢！

【解决方案2】：

很奇怪，但我喜欢它！

https://codesandbox.io/s/elated-meadow-zuerrg?file=/src/App.js

我会简单地使用 useEffect 在 document 上注册一个点击处理程序，然后在点击时将元素添加到 state 数组。

最后，将这些元素渲染到页面上。

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const elements = useDynamicElements();

  return (
    <>
      <h2>Click anywhere</h2>
      {elements}
    </>
  );
}

const useDynamicElements = () => {
  const [state, setState] = useState([]);

  useEffect(() => {
    const handler = (event) => {
      setState((previous) => [
        ...previous,
        <div style={{ top: event.pageY, left: event.pageX }} />
      ]);
    };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  });

  return state;
};

【讨论】：