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

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

单击后，我想获得我单击的3个div中任何一个的div坐标/位置

我尝试过使用

React.createRef（）

和

getBoundingClientRect（）

。但是，无论单击哪个div，这两种方法都会给我相同的坐标

看起来它返回的是

标记的坐标，而不是我单击的目标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;

class.com组件{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
此.state={
分区：[
{ 
类名：“hat1”
},
{ 
类名：“hat2”
},
{ 
类名：“hat3”
}
]
}
}
componentDidMount=（）=>{
console.log（'mount'）；
}
handleClick=（项目，i）=>{
console.log（'item'，item）；
console.log（'i'，i）；
var divCoordinates=ReactDOM.findDOMNode（this.getBoundingClientRect（）；
log（divCoordinates，'divCoordinates'）；
//const node=this.myRef.current；
//console.log（'node'，node）；
}
render（）{
返回(
圆筒游戏
球形容器
{this.state.divs.map（（项，i）=>{
返回(
this.handleClick（项目，i）}
className={item.className}
key={item.name+i}
ref={el=>this.containerLine=el}
>{i}
)
})}
);
}
}
输出默认气缸；

我让它工作了

我只是用

item.target

将项目作为目标

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