在 React JS 中获取 3 个单独 div 的位置答案

【问题标题】：Get position of 3 seperate divs in ReactJS在 React JS 中获取 3 个单独 div 的位置
【发布时间】：2019-12-27 23:22:58
【问题描述】：

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

OnClick，我想获取我单击的 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;

【问题讨论】：

标签： reactjs dom coordinates getboundingclientrect

【解决方案1】：

我搞定了！

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

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

【讨论】：