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

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>

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>
  );
}

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

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

Reactjs相关问答推荐

MUImaterial -ui-如何将文本字段和 Select 分组？

使用useEffect挂钩获取数据

我应该如何管理设置组件初始状态的复杂逻辑？

Redux工具包-useSelector如何通过Reducer引用InitialState？

需要特定的数学函数来标准化动画持续时间

在transformResponse中使用来自其他查询的缓存

为什么React UseEffect挂钩在页面重新加载时运行

无法在 NextJS 中获取嵌套对象

如何在react 中过滤数组的数组？

React-router动态路径

Mui / Material UI 5：如何从 StaticTimePicker 中删除打开下一个视图/打开上一个视图按钮？

从 redux 调用UPDATE_DATA操作时状态变得未定义

在React Router 6中，在路由渲染后更新路由数据

useMemo 依赖项的行为

使用 MuiCssBaseline 在所有 MUI v5 标签上设置边距 0

ReactJS：在导航栏中使用 Select inside Link 组件时如何避免重定向？

找不到元素 - 这是参考问题吗？

将 set statehook 函数传递给子路由组件.解构错误

CORS 政策：无访问控制允许来源-AWS 和 Vercel

在状态中存储多个选定的选项