Recharts tooltip with pointer (react,tooltip) - code part

问题

This question is the code for the question posted here:Recharts tooltip with pointer (react,tooltip).

The original question:

On a line graph trying to display tooltip with pointer that shows dashed lines going to x-axis and y-axis accordingly. The problem is I can use them separately but not together because onMouseMove state interferes with the display of the tooltip. Is there a solution for this?

Chart.js

import React, { Component } from 'react';
import moment from 'moment';
import './Chart.css';

import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, ReferenceLine, ResponsiveContainer,Cross } from 'recharts';

class Chart extends Component {

constructor(props) {
    super(props);
    this.state = {
      chartX: 0,
      chartY: 0,
      hover:false
    };

    this.onMouseMoveHandler = this.onMouseMoveHandler.bind(this);
  }
  isOverMaxBitrate (data,ensemble) {
    return data.reduce((acc, d) => acc || d.bitrate > ensemble.get('maxBitrate'), false);
  }
onMouseMoveHandler(e) {
   // e.chartX, e.chartY
          //this.setState({hover: true});
       //   console.log("chartX " + e.chartX + "chartY" + e.chartY);
      // if(e.chartX.toString() !='undefined' && e.chartY.toString() !='undefined'){
       if( (Object.prototype.toString.call(e.chartX)!= Object.prototype.toString.call(undefined))&& (Object.prototype.toString.call(e.chartY)!= Object.prototype.toString.call(undefined)) ){
//      console.log (" DEFINED e.chartX " + e.chartX.toString() + " e.chartY" + e.chartY.toString())
          this.setState({ chartX: e.chartX , chartY: e.chartY, hover: true });
       }
       else{
          this.setState({  hover: false });
//          console.log ("Undefined e.chartX  e.chartY"  )
          }
         /* prevState => ({
                hover: !prevState.hover*/
      }

    onMouseEnterHandler() {
       // console.log('enter');
        this.setState({
            hover: true
        });
    }
    onMouseLeaveHandler() {
       // console.log('leave');
        this.setState({
            hover: false
        });
    }
  render() {
    const { ensemble, data, onClick ,startDay,endDay} = this.props;
        var dateBeforeMidnight = "";
        var dateAfterMidnight = "";
//console.log ("start " + startDay + "end " + endDay    )
var verticalLine;
var horizontalLine;
 if(this.state.hover) {
           verticalLine =  <line x1={this.state.chartX} y1={10} x2={this.state.chartX} y2={260}   stroke="green" strokeDasharray= '3 3' />;
           horizontalLine =  <line x1={60} y1={this.state.chartY} x2={850} y2={this.state.chartY}  strokeDasharray= '3 3' stroke="blue"   />;
        }else{
        verticalLine = null;
       horizontalLine = null;
        }

   // console.log(this.state);

    // startDay: { format(string) -> string }
    //
    return (
      <div className='Chart'  >
        <div className='Chart-bg' >
          <h3 className='Chart-title'>{ ensemble.get('description') }</h3>
          <ResponsiveContainer aspect={3} width='100%'    >
            <LineChart data={data} margin={{ top: 10, bottom: 10, left: 0, right: 50 }} onClick={onClick} onMouseMove={this.onMouseMoveHandler.bind(this)} onMouseEnter={this.onMouseEnterHandler.bind(this)}  onMouseLeave={this.onMouseLeaveHandler.bind(this)}  >

            {verticalLine}
            {horizontalLine}

              <CartesianGrid stroke='#ccc'  />
              <XAxis dataKey='time'  />
              <YAxis domain={['auto', 'auto']}/>
               <Tooltip />
              <ReferenceLine y={ensemble.get('maxBitrate', 0)} stroke='red' />
             <ReferenceLine x="00:00" stroke='red' label={moment(this.props.startDay).format("dddd MMMM D ")  +  '         ' +   '      ,    ' +     moment(this.props.endDay).format("dddd MMMM D ")}></ReferenceLine>

              <ReferenceLine x="12:00 am" stroke='red' label={moment(this.props.startDay).format("dddd MMMM D ")  +  '          ' +  '     ,     ' +       moment(this.props.endDay).format("dddd MMMM D ")} ></ReferenceLine>

              <Line type='monotone' dataKey='bitrate'  stroke={this.isOverMaxBitrate(data, ensemble) ? 'red' : 'blue'}/>

            </LineChart>
          </ResponsiveContainer>

        </div>

      </div>


    );
  }
}

export default Chart;

Chart.css

.Chart {
  border: 1px solid black;
  background-color: grey;
}

.Chart:not(:first-child) {
  margin-top: 10px;
}

.Chart-bg {
  background-color: white;
}

.Chart-title {
  margin: 0;
  padding-top: 5px;
}

.Chart .recharts-surface {
  cursor: pointer;


      padding: 10px;

}


.customizedTooltip{

 pointer-events: none;
 position:absolute;
 display:block;
 opacity:1;
 width:100%;
 placement: bottom;
 opacity:0.7;
 z-index:1000000;
 visibility:visible;


}


.wrapper {


  position: relative;
  pointer-events:auto;
  opacity:0.5;
  visibility:visible;






}

来源：https://stackoverflow.com/questions/43262653/recharts-tooltip-with-pointer-react-tooltip-code-part