javascript - 我似乎无法使用react将这些方法传递给我的组件

Question

我正在构建一个在选择时弹出的文本框，并对其进行设置，以便在我想要的时候弹出该框。发生的情况是工具提示组件显示在工具栏中，并带有两个按钮，但这些按钮不执行任何操作。我发送到该工具提示组件的两个方法似乎没有做任何事情。

当我检查开发工具时，工具提示组件似乎正在主组件之外呈现，这可能可以解释这一点。

有没有办法解决这个问题以获得我需要的功能？

主要成分:

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

传递给工具提示组件的属性可以在 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;