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

Question

我正在尝试将 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, 12);

    let seriesRange = dateAxis.createSeriesRange(series);

    seriesRange.contents.strokeDasharray = "2,3";

    seriesRange.contents.stroke = chart.colors.getIndex(8);

    seriesRange.contents.strokeWidth = 1;

    });

我无法访问this.setState({slider: 1586025000000 })该sound功能。我很新的反应。欢迎提出任何建议；

Answer 1

您需要使用直接调用您的方法（或调用 bind: ）的箭头函数包装您的回调，this.sound.bind(this)以便它解析到正确的this范围：<ReactAudioPlayer&nbsp; &nbsp;&nbsp;src="{audio}"&nbsp; &nbsp;&nbsp;onPlay={(ev)&nbsp;=>&nbsp;this.sound(ev)}&nbsp; &nbsp;&nbsp;onListen={(ev)&nbsp;=>&nbsp;this.lis(ev)}&nbsp; &nbsp;&nbsp;onSeeked={(ev)&nbsp;=>&nbsp;this.seek(ev)}&nbsp; controls></ReactAudioPlayer>