React，offsetTop，offsetLeft和getBoundingClientRect（）不起作用

Question

我正在處理反應，並且正在使用工具提示創建按鈕，但我無法放置它。我的意思是我無法讀取按鈕距離頂部和左側的距離。

我試過的offsetTop和offsetLeft和我得到這個錯誤：「遺漏的類型錯誤：未定義無法讀取屬性‘offsetWidth’」所以我嘗試getBoundingClientRect（）和所有我得到的是另一個錯誤：「遺漏的類型錯誤：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 
    }; 

}; 

But now I'm getting this error: "Uncaught TypeError: Cannot read property 'y' of undefined". Meybe there is something wrong with process of passing informations?

你得到這個錯誤具有因這種結構：即使你聲明類似var options

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

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

你還是不能保證選項將在工具提示渲染方法中定義和訪問。

一般來說 - 你的代碼不好。我強烈建議你採取一些反應教程，瞭解狀態，道具和反應組件生命週期。 ES6的知識也不會受到傷害。