React、offsetTop、offsetLeft、およびgetBoundingClientRect（）が機能しません。

Question

私は反応していますが、ツールチップでボタンを作成していますが、配置できません。私は、ボタンの上と下からの距離を読み取ることができないことを意味します。

私はoffsetTopとoffsetLeftを試してみましたが、私はこのエラーました：「キャッチされない例外TypeError：プロパティを読み取ることができません 『をoffsetWidth』未定義の」をので、私は（getBoundingClientRectを試してみました）と私が得たすべては別のエラーです：「キャッチされない例外TypeError：elemは.getBoundingClientRectは関数 "ではありません。

グローバル変数に距離を割り当て、それを配置する必要があるときにこの2番目のコンポーネントで読み取ることで、コンポーネントから2番目のコンポーネントに情報を渡しています。

（私は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?

をあなたがこのような構成のbecasuseこのエラーを取得する：あなたがvar optionsのようなものを宣言している場合でも

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

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

あなたはまだその保証はありませんツールチップのレンダリング方法でオプションが定義され、アクセス可能になります。

一般的に - あなたのコードは悪いです。私はあなたに、いくつかの反応チュートリアルをとり、状態、小道具について学び、コンポーネントのライフサイクルに反応することを強くお勧めします。 ES6の知識も損なわれません。