addPoint = (e) => {
e.preventDefault();
e.stopPropagation();
const mouseCoordsLayer = this.pageRefs.current;
const coordinate = [];
console.log('click1');
let point = mouseCoordsLayer.createElement("div");
coordinate.push([this.MouseCoords.getX(e), this.MouseCoords.getY(e)]);
}
};
Что пофиксить, подскажите плиз.
.points {
position: relative;
height: 400px;
border: 1px solid silver;
overflow: hidden;
}
.point {
display: inline-block;
position: absolute;
width: 20px;
height: 20px;
background: red;
}class App extends React.Component {
state = {
points: [],
}
addPoint = ({ nativeEvent: { offsetX, offsetY } }) => {
this.setState(({ points }) => ({
points: [ ...points, {
x: offsetX - 10,
y: offsetY - 10,
} ],
}));
}
render() {
return (
<div className="points" onClick={this.addPoint}>
{this.state.points.map(n => (
<div className="point" style={{
left: `${n.x}px`,
top: `${n.y}px`,
}}
></div>
))}
</div>
);
}
}
Простой
Средний
