我似乎無法得到反應將這些方法傳遞到我的組件

Question

我正在構建一個文本框，彈出選擇並設置它，以便當我需要時彈出該框。工具提示組件出現在帶有兩個按鈕的工具欄中，但按鈕不起任何作用。我發送到該Tooltip組件的兩種方法似乎沒有做任何事情。

當我檢查devtools時，它看起來像Tooltip組件在主組件之外渲染，這可能會解釋這一點。

有沒有一種方法可以解決這個問題以獲得我需要的功能？

主要成份：

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import ReactTooltip from 'react-tooltip'; 
 
import Tooltip from './Tooltip.jsx'; 
 
import Editor from 'react-medium-editor'; 
 

 
class Main extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = {text: ''} 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className = "container" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}> 
 
     <h1 className = "headLine" >Medium Markup</h1> 
 
      <p className='editable'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id felis vel sem tristique efficitur. Nunc neque purus, tempor eget urna eu, porttitor congue nulla. Morbi vitae lectus sollicitudin, congue dolor ac, ornare ex. Aenean molestie rutrum mauris, vel ultricies erat pellentesque eget. Nunc at nisi id turpis lobortis ultrices ac eget mi. Cras ac facilisis leo. Vestibulum a enim eget ex tempor pretium. Nunc dignissim bibendum molestie. Fusce imperdiet imperdiet tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec nec gravida massa. Fusce tristique, nulla vitae porttitor venenatis, mi sem fermentum metus, sit amet auctor mi nisl nec erat.</p> 
 
     </div> 
 
    ); 
 
    } 
 

 
    captureSelection() { 
 
    var selectedText = ''; 
 

 
    if(window.getSelection()){ 
 
     selectedText = window.getSelection(); 
 
    } else if (document.getSelection()) { 
 
     selectedText = document.getSelection() 
 
    } else if (document.selection) { 
 
     selectedText = document.selection.createRange().text; 
 
    } 
 
    console.log('this is selectedtext: ', selectedText) 
 
    this.setState({text: selectedText.toString()}) 
 
    if(selectedText.toString() !== ''){ 
 
     this.toolBox(); 
 
    } 
 
    
 
    } 
 

 
    highLightText(e) { 
 
    console.log('highlight this!'); 
 
    } 
 

 
    commentText(e) { 
 
    console.log('comment this!'); 
 
    } 
 

 
    toolBox() { 
 
    var selection = window.getSelection() 
 
    var range = selection.getRangeAt(0); 
 
    var rect = range.getBoundingClientRect(); 
 
    var div = document.createElement('div'); // make box 
 
    div.style.top = (rect.top + -75) + 'px'; 
 
    div.style.left= (rect.left) + 'px'; 
 
    div.style.height = 50 + 'px'; 
 
    div.style.width = rect.width + 'px'; 
 
    div.className = 'toolTip'; 
 
    ReactDOM.render(
 
     <Tooltip highli={this.highLightText} commentT={this.commentText} />, 
 
     document.body.appendChild(div), 
 
    ) 
 
    document.body.appendChild(div); 
 
    } 
 
    
 
    removetoolBox() { 
 
    var elements = document.getElementsByClassName('toolTip'); 
 
    while(elements.length > 0){ 
 
     elements[0].parentNode.removeChild(elements[0]); 
 
    } 
 
    } 
 
} 
 

 
export default Main;

工具提示組件：

import React from 'react' 
 

 

 
class Tooltip extends React.Component { 
 
    constructor(props){ 
 
    super(props); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="container"> 
 

 
     <button onClick={this.highl} className="buttons">Highlight</button> 
 
     <button onClick={this.commentT} className="buttons">Comment</button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
export default Tooltip;

Answer 1

的道具，你傳遞給工具提示componen t可在this.props下查詢，不在this下查詢。

此代碼應工作：

import React from 'react' 


class Tooltip extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    render() { 
    return (
     <div className="container"> 

     <button onClick={this.props.highl} className="buttons">Highlight</button> 
     <button onClick={this.props.commentT} className="buttons">Comment</button> 
     </div> 
    ) 
    } 
} 

export default Tooltip; 

Answer 2

1）您的來電Tooltip從Main你應該綁定類的方法，比如在你以前的代碼所做的：

<Tooltip highli={this.highLightText.bind(this)} commentT={this.commentText.bind(this)} />, 

（真的，你應該例如：

constructor(props) { 
    super(props); 
    this.this.highLightText = this.highLightText.bind(this); 
    ... 
} 

那麼你不必守重新綁定方法render）

2）在實際Tooltip組件，使用this.props：

<button onClick={this.props.highl} className="buttons">Highlight</button> 
<button onClick={this.props.commentT} className="buttons">Comment</button>