将数据从ReactAudioPlayer传递到Amcharts滑块？

如何解决将数据从ReactAudioPlayer传递到Amcharts滑块？

我正在尝试将amcharts控件组合到react音频播放器中。
在这里，我有带滑块的amcharts线图。现在，我尝试以某种方式控制滑块，以便每当我按下react音频播放器的播放按钮时，都可以使用音频播放器的搜寻器移动滑块。我希望这对您有意义。

import React from "react";
import ReactAudioPlayer from "react-audio-player";
import audio from "/home/aniruddha/workspace/playwith_audio/anni_web_player/src/audio.flac";

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_spiritedaway from "@amcharts/amcharts4/themes/spiritedaway";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

/* Chart code */
// Themes begin
am4core.useTheme(am4themes_spiritedaway);
am4core.useTheme(am4themes_animated);

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {slider: 1586169460800};
  }
  
  componentDidMount() {
    let chart = am4core.create("chartdiv",am4charts.XYChart);

    // Add data
    chart.data = this.generateChartData();

    // Create axes
    let dateAxis = chart.xAxes.push(new am4charts.DateAxis());

    let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    let series = chart.series.push(new am4charts.Lineseries());
    series.datafields.valueY = "visits";
    series.datafields.dateX = "date";
    series.strokeWidth = 1;
    series.minBulletdistance = 10;
    series.tooltipText = "{valueY}";
    series.fillOpacity = 0.1;
    series.tooltip.pointerOrientation = "vertical";
    series.tooltip.background.cornerRadius = 20;
    series.tooltip.background.fillOpacity = 0.5;
    series.tooltip.label.padding(12,12,12);

    let seriesRange = dateAxis.createSeriesRange(series);
    seriesRange.contents.strokeDasharray = "2,3";
    seriesRange.contents.stroke = chart.colors.getIndex(8);
    seriesRange.contents.strokeWidth = 1;

    let pattern = new am4core.LinePattern();
    pattern.rotation = -45;
    pattern.stroke = seriesRange.contents.stroke;
    pattern.width = 1000;
    pattern.height = 1000;
    pattern.gap = 6;
    seriesRange.contents.fill = pattern;
    seriesRange.contents.fillOpacity = 0.5;

    // Add scrollbar
    chart.scrollbarX = new am4core.Scrollbar();

    // add range
    let range = dateAxis.axisRanges.push(new am4charts.DateAxisDataItem());
    range.grid.stroke = chart.colors.getIndex(0);
    range.grid.strokeOpacity = 1;
    range.bullet = new am4core.ResizeButton();
    range.bullet.background.fill = chart.colors.getIndex(0);
    range.bullet.background.states.copyFrom(
      chart.zoomOutButton.background.states
    );
    range.bullet.minX = 0;
    range.bullet.adapter.add("minY",function (minY,target) {
      target.maxY = chart.plotContainer.maxHeight;
      target.maxX = chart.plotContainer.maxWidth;
      return chart.plotContainer.maxHeight;
    });

    range.bullet.events.on("dragged",function () {
      range.value = dateAxis.xTovalue(range.bullet.pixelX);
      seriesRange.value = range.value;
      console.log(seriesRange.value)
    });

    let firstTime = chart.data[0].date.getTime();
    let lastTime = chart.data[chart.data.length - 1].date.getTime();
    let date = new Date(firstTime + (lastTime - firstTime) / 2);

    range.date = date;

    seriesRange.date = date;
    seriesRange.endDate = chart.data[chart.data.length - 1].date;

    this.chart = chart
    console.log(this.state.slider);
    
    this.setState({ seriesRange } )
    console.log(this.state.slider);
    range.value = this.state.slider;
    seriesRange.value = this.state.slider;
  }

  generateChartData() {
    let chartData = [];
    let firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 200);
    let visits = 1200;
    for (var i = 0; i < 200; i++) {

      let newDate = new Date(firstDate);
      newDate.setDate(newDate.getDate() + i);

      visits += Math.round(
        (Math.random() < 0.5 ? 1 : -1) * Math.random() * 10
      );

      chartData.push({
        date: newDate,visits: visits,});
    }
    return chartData;
  }
  
  sound(event){
    console.log(event.timeStamp);
         
    //this.setState({slider: 1586025000000 })
    
  }

  seek(event){
    console.log(event);
  }

  lis(event){
    console.log(event);
  }

  componentwillUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }


  render() {
    return (
      <div>
        <div id="chartdiv" style={{ width: "100%",height: "500px" }}></div>
        <ReactAudioPlayer src={audio} onPlay={this.sound} onListen={this.lis} onSeeked={this.seek} controls></ReactAudioPlayer>
      </div>
    );
  }
}

export default App;

我无法在this.setState({slider: 1586025000000 })函数中访问sound。我很新来做出反应。请欢迎任何建议；

解决方法

您需要使用直接调用方法（或调用绑定：this.sound.bind(this)）的箭头函数包装回调，以使其解析为正确的this范围：

<ReactAudioPlayer 
  src="{audio}" 
  onPlay={(ev) => this.sound(ev)} 
  onListen={(ev) => this.lis(ev)} 
  onSeeked={(ev) => this.seek(ev)} 
controls></ReactAudioPlayer>