React, OffsetTop, OffsetLeft und GetBoundingClientRect() funktionieren nicht

Question

Ich arbeite in reagieren und ich erstelle eine Schaltfläche mit einem Tooltiop, aber ich kann es nicht platzieren. Ich meine, ich kann den Abstand des Knopfes von oben und von links nicht lesen.

Ich versuchte offsetTop und offsetleft und ich habe diesen Fehler: „Uncaught Typeerror: kann Eigenschaft lesen‚offset‘undefinierter“ so habe ich versucht, getBoundingClientRect() und alles, was ich bekam ein anderer Fehler: „Uncaught Typeerror: Elem .getBoundingClientRect ist keine Funktion ".

Ich übermittle die Informationen von der Komponente zur zweiten Komponente, indem ich die Abstände der globalen Variablen zuweise und sie in dieser zweiten Komponente lese, wenn ich sie platzieren muss.

Dies ist mein Code (auf der Bühne, wenn ich versuche, etw mit getBoundingClientRect zu tun):

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') 
); 

Und ich habe keine Ahnung, was los ist:/Danke für die Hilfe :)

Answer 1

functions showTooltip(elem) and removeTooltip(elem) 

sollte außerhalb der render() -Methode sein und an den IconButton-Kontext gebunden sein. Andernfalls wird this.refs nicht definiert.

wie ich denke, showTooltip und removeTooltip Funktionen sind falsch. Sie sollten nimmt das Ereignis als Argument, zB ::

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?

Sie diesen Fehler becasuse dieser Konstruktion:

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

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

Auch wenn Sie so etwas wie var options erklären Sie immer noch keine Garantie, dass Optionen werden in der Tooltip-Rendermethode definiert und verfügbar gemacht.

Im Allgemeinen - Ihr Code ist schlecht. Ich empfehle Ihnen dringend, einige Lernanleitungen zu nehmen, etwas über den Zustand, die Requisiten und den Lebenszyklus der Komponenten zu erfahren. ES6 Wissen wird nicht so gut weh tun.