在ReactJS中获得3个单独的div的位置

Question

我有3个div，我正在ReactJS应用程序中显示。我通过遍历状态存储的classNames对象来显示div。 （每个className都有其自己的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;

Answer 1

我知道了！

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

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