获取 ReactJS 中 3 个独立 div 的位置

Question

我有 3 个div，我显示在 ReactJS 应用程序中。 我通过循环访问存储在状态中的类名对象来显示div。 (每个类名都有自己的CSS样式，它显示一种颜色 - hat1，hat2，hat3(。

点击，我想获取我点击的 3 个div 中的任何一个的div 坐标/位置。

我试过使用React.createRef()和getBoundingClientRect().但是，无论我单击哪个div，这两种方法都为我提供了相同的坐标。

看起来它返回的是<section>标签的坐标，而不是我点击的目标div 元素......

我做错了什么？

class Cylinders extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {
divs: [
{ 
className: 'hat1'
},
{ 
className: 'hat2'
},
{ 
className: 'hat3'
}
]
}
}

componentDidMount = () => {
console.log('mount');
}
handleClick = (item, i) => {
console.log('item', item);
console.log('i', i);
var divCoordinates = ReactDOM.findDOMNode(this).getBoundingClientRect();
console.log(divCoordinates, 'divCoordinates');
// const node = this.myRef.current;
// console.log('node', node);
}
render() {
return (
<section>
<div className="columns is-mobile">
<div className="column">
<h1 className="title has-text-black is-size-2">Cylinders Game</h1>
<button className="has-text-black">Ball container</button>
</div>
</div>
<div className="columns is-mobile">
<div className="colum ballContainer">
<div className="ball"></div>
</div>
</div>
<div className="columns is-mobile">
{this.state.divs.map((item, i) => {
return (
<div className="column">
<div className="columns is-multiline">
<div
onClick={() => this.handleClick(item, i)}
className={item.className}
key={item.name + i}
ref={el => this.containerLine = el}
> {i}
</div>
</div>
</div>
)
})}
</div>
</section>
);
}
}
export default Cylinders;

Answer 1

我让它工作了！

我只是用item.target来定位该项目.

var divCoordinates = ReactDOM.findDOMNode(item.target).getBoundingClientRect();