Question

我正在构建一个弹出选择的文本框，并将其设置好，以便在我需要时弹出框。会发生什么是工具提示组件显示在工具栏中有两个按钮，但按钮不做任何事情。我发送到Tooltip组件的两种方法似乎没有做任何事情。

当我检查devtools时，看起来Tooltip组件在Main组件之外呈现，这可能解释了这一点。

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

主要组成部分：

＆＃13;

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;

＆＃13;

工具提示组件：

＆＃13;

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;

＆＃13;

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;

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>

我似乎无法做出反应将这些方法传递给我的组件

2 个答案: