1

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

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

我试过使用React.createRef()and 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;
4

1 回答 1

1

我让它工作了！

我只是针对该项目，使用item.target.

var divCoordinates = ReactDOM.findDOMNode(item.target).getBoundingClientRect();
于 2019-12-27T23:47:26.663 回答