offsetTop、offsetLeft 和 getBoundingClientRect() 在我的 React 应用程序中不起作用

Question

我正在反应中工作，正在创建一个带有工具提示的按钮，但我无法放置它。我的意思是我无法读取按钮距顶部和左侧的距离。

我尝试了 offsetTop 和 offsetLeft ，但得到了这个错误：“Uncaught TypeError：无法读取未定义的属性‘offsetWidth’”，所以我尝试了 getBoundingClientRect() ，得到的只是另一个错误：“Uncaught TypeError：elem.getBoundingClientRect 不是一个函数”。

我通过将距离分配给全局变量来将信息从组件传递到第二个组件，并在需要放置它时在第二个组件中读取它。

这是我的代码（当我尝试使用 getBoundingClientRect 做某事时在舞台上）：

import React from 'react';
import ReactDOM from 'react-dom';
import Style from 'style-it'; 
var Ink = require('react-ink');
import FontIcon from '../FontIcon/FontIcon';

var options;

var Tooltip = React.createClass({
  render(){

    var _props = this.props,
      style = {
          top: options.y,
          left: options.x,
      };

    return(
      <div className="tooltip" style={style}>{_props.text}</div>
    );
  }
});

var IconButton = React.createClass({ 

  getInitialState() {
      return {
          iconStyle: "",
          style: "",
          cursorPos: {},
      };
  },

  extend(obj, src) {
      Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
      return obj;
  },

  render() {

    var _props = this.props,
      opts = {},
      disabled = false,
      rippleOpacity,
        outterStyleMy = {
        border: "none",
            outline: "none",
            padding: "8px 10px",
        "background-color": "red",
        "border-radius": 100 + "%",
        cursor: "pointer",
        },
        iconStyleMy = {
            "font-size": 12 + "px",
            "text-decoration": "none",
            "text-align": "center",
            display: 'flex',
            'justify-content': 'center',
            'align-items': 'center',
        },
      rippleStyle = {
        color: "rgba(0,0,0,0.5)",
      };

    if (_props.disabled || _props.disableTouchRipple) {
      rippleStyle.opacity = 0;
    };

    this.setState({
      iconStyle: _props.iconStyle
    });

    this.setState({
      style: _props.style
    });

    if (_props.disabled) {
       disabled = true;
    };

    if (this.state.labelStyle) {
        iconStyleMy = this.state.iconStyle;
    };

    if (this.state.style) {
      outterStyleMy = this.state.style;
    };

    if (_props.href) {
      opts.href = _props.href;
    };

    function showTooltip(elem){
      // Here I tried to use offset methods, it's how it looked like:
      // options = {
      //   w: this.refs.button.offsetWidth,
      //   x: this.refs.button.offsetLeft,
      //   y: this.refs.button.offsetTop
      // };

      var rect = elem.getBoundingClientRect();
      options = {
        x: rect.left,
        y: rect.top
      };

    };

    function removeTooltip(elem){
      options = null;
    };

        var buttonStyle = this.extend(outterStyleMy, iconStyleMy);

        return(
        <Style>
        {`
          .IconButton{
            position: relative;
          }
          .IconButton:disabled{
            color: ${_props.disabledColor};
          }
          .btnhref{
            text-decoration: none;
          }
        `}
         <a {...opts} className="btnhref" > 
          <Tooltip text={_props.tooltip} position={this.options} />
          <button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
          onMouseEnter={showTooltip(this)} onMouseLeave={removeTooltip(this)} >
            <Ink background={true} style={rippleStyle} opacity={rippleOpacity} />
            <FontIcon className={_props.iconClassName}/>
          </button>
        </a>
        </Style>
        );

  }
});

ReactDOM.render(
 <IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="aaaaa" />,
 document.getElementById('app')
);

我不知道出了什么问题:/谢谢你的帮助:)

Answer 1

functions showTooltip(elem) and removeTooltip(elem)

应该在 render() 方法之外并绑定到 IconButton 上下文。否则，this.refs将是未定义的。

<button ref="button" 
className={"IconButton" + _props.className} 
disabled={disabled} 
style={buttonStyle}
onMouseEnter={this.showTooltip.bind(this)} 
onMouseLeave={this.removeTooltip.bind(this)} >

另外，我认为 showTooltip 和 removeTooltip 函数是错误的。他们应该将事件作为参数，例如::

function showTooltip(event){
  var elem = event.target
  var rect = elem.getBoundingClientRect();
  options = {
    x: rect.left,
    y: rect.top
  };

};

但现在我收到此错误：“未捕获类型错误：无法读取未定义的属性‘y’”。也许传递信息的过程有问题？

由于这种构造，您会收到此错误：

render(){
   var _props = this.props,
         style = {
            top: options.y,
            left: options.x,
         };

         return(
            <div className="tooltip" style={style}>{_props.text}</div>
         );
  }

即使您声明了类似的内容，var options仍然不能保证选项将在 Tooltip 渲染方法中定义和访问。

一般来说 - 你的代码很糟糕。我强烈建议你学习一些 React 教程，了解状态、道具和 React 组件生命周期。ES6 知识也不会有什么坏处。